$(document).ready(function() {
var ul = $("ul").data("index", 0)
, li = $("li", ul)
// set duration
, d = 1200
// create `q` array of functions to call
// in sequential order, where `el` is current `li` element
, q = $.map(li, function(el, index) {
return function(next) {
// set `ul` `data-index` to current `li` index:`q` function index
ul.data("index", index)
// do stuff, call next function in `q` queue
.find(el).fadeIn(d).delay(d).fadeOut(d, next);
}
});
ul.hover(
// handle at `ul` `mouseenter` event
function() {
// clear `ul` queue; clear, stop `li` animation queue
ul.clearQueue("_fx").find(li).stop(true);
}
// handle at `ul` `mouseleave` event
, function() {
// reset `ul` queue at current `li` using `index`
// set at last function called in queue
ul.queue("_fx", q.slice(ul.data().index)).dequeue("_fx");
})
.delay(d, "_fx").queue("_fx", q).dequeue("_fx").promise("_fx")
.then(function() {
// do stuff when `ul` queue completes
$(this).hide(function(){
alert("slideshow complete");
})
})
});
ul {
border: 1px solid blue;
}
ul:hover {
cursor: wait;
border: 2px solid sienna;
}
ul li {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul>
<!-- Slide -->
<li class="index_start">
<h1>Text 1</h1>
<h2>Text 1</h2>
</li>
<!-- Slide -->
<li class="index_lagen">
<h1>Text 2</h1>
<h2>Text 2</h2>
</li>
<!-- Slide -->
<li class="index_optimist">
<h1>Text 3</h1>
<h2>Text 3</h2>
</li>
<!-- Slide -->
<li class="index_funktion">
<h1>Text 4</h1>
<h2>Text 4</h2>
</li>
</ul>