Autorunning CSS-change

Question

I know there are solutions out there to solve that; but I want to get this done on my "own" (you got to know your limitations: Hello stackoverflow) path. So I want a sort of carousel, where the whole ul-element gets a negative margin-left per a set time-interval as long as the user doesn't hover the ul-area. So it's initially something like that:

var index_versatz = -100;
var index_position = 0;
var index_position_vw = 0;

 $(document).ready(function () {
    index_position += index_versatz;
    index_position_vw = index_position + "vw";
    $(".content__index ul").delay(1200)
        .queue(function (next) {
            $(this).css('margin-left', index_position_vw);
            next();
        });
});

with a html-structure like that:

 <ul>
            <!-- Slide -->
            <li class="index_start">
                <h1>Text</h1>
                <h2>Text</h2>
</li>
            <!-- Slide -->
            <li class="index_lagen">
                <h1>Text</h1>
                <h2>Text</h2>
</li>
            <!-- Slide -->
            <li class="index_optimist">
                <h1>Text</h1>
                <h2>Text</h2>
</li>
            <!-- Slide -->
            <li class="index_funktion">
                <h1>Text</h1>
                <h2>Text</h2>
</li>
        </ul>

And for me as a very first step that works, but it just does those changes to the very first slide while I want it to run automatically, as long as nobody hovers the .content__index ul - area.

I'll need to do 2 things there: - Use a different handler (?) then .ready (or tell the script to start again) - and an if-expression to detect if the user hovers the area.

You would really already help me a lot with the very first block on how to run that whole thing automatically.

Answer 1

You can use .clearQueue() to empty the queue array at .hover(), .stop() to stop animation at li element, .slice() to reset the queue from current index of functions in queue array; .promise(), .then() to perform task when all animations completed

$(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>

plnkr http://plnkr.co/edit/U74oTZz1G4Xu7miFmcuK?p=preview

Answer 2

I would recommend you to put this in a function, set a global variable that you will set with setTimeout(function(){yourFunctionName();}, givenTime) at the end of your function.

That way your function is called at regular interval, and you can call a clearTimeout(yourTimeoutGlobalVariable); on event hover.

PS: I didn't wrote the whole script so you can do it your "own way", tell me if you're still stuck.