How to show the list element one after one with fade in effect but not using fragment?

[fdq09eca]

I understand from tutorial Fragment Styles section that it is possible to show object one by one in slide mode with .element: class="fragment".

<span>... a<!-- .element: class="fragment" data-fragment-index="1" --></span> <span>fragmented<!-- .element: class="fragment" data-fragment-index="2" --></span> <span>slide.<!-- .element: class="fragment" data-fragment-index="3" --></span>

but I have a rather long list, like below

- element 1
  - element 1.1
  - element 1.2
  - element 1.3
- element 2
  - element 2.1
  - element 2.2
  - element 2.3

I want its element to be showed orderly one by one. Instead of doing the following:

- <span>element 1 <!-- .element: class="fragment" data-fragment-index="1" --></span>
  - <span>element 1.1 <!-- .element: class="fragment" data-fragment-index="2" --></span>
  - <span>element 1.2 <!-- .element: class="fragment" data-fragment-index="3" --></span>
  - <span>element 1.3 <!-- .element: class="fragment" data-fragment-index="4" --></span>
- <span>element 2 <!-- .element: class="fragment" data-fragment-index="5" --></span>
  - <span>element 2.1 <!-- .element: class="fragment" data-fragment-index="6" --></span>
  - <span>element 2.2 <!-- .element: class="fragment" data-fragment-index="7" --></span>
  - <span>element 2.3 <!-- .element: class="fragment" data-fragment-index="8" --></span>

do I have another neater option?

[Eothred]

I found a slightly trimmed down version which also includes the bullet itself in the fragmented element:

- <!-- .element: class="fragment" data-fragment-index="1" --> element 1 
  - <!-- .element: class="fragment" data-fragment-index="2" --> element 1.1
  - <!-- .element: class="fragment" data-fragment-index="3" -->  element 1.2
- <!-- .element: class="fragment" data-fragment-index="4" --> element 2 
  - <!-- .element: class="fragment" data-fragment-index="5" --> element 2.1