javascript - 自动运行 CSS 更改

Question

我知道有一些解决方案可以解决这个问题；但我想在我的“自己”(你必须知道你的局限性:Hello stackoverflow)路径上完成这项工作。所以我想要一种旋转木马，只要用户不悬停在 ul 区域，整个 ul 元素在每个设定的时间间隔内都会获得负边距。所以它最初是这样的:

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();
        });
});

像这样的 html 结构:

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

对我来说，这是可行的第一步，但它只是在我希望它自动运行时对第一张幻灯片进行这些更改，只要没有人将鼠标悬停在 .content__index ul -地区。

我需要在那里做两件事:- 使用不同的处理程序 (?) 然后 .ready (或告诉脚本重新开始)- 以及用于检测用户是否悬停在该区域的 if 表达式。

关于如何自动运行整个过程的第一个模块，您真的已经帮了我很多。

Answer 1

可以使用.clearQueue()在.hover()处清空队列数组，在.stop()处停止动画li 元素，.slice() 从队列数组中函数的当前索引处重置队列； .promise(), .then() 所有动画完成后执行任务

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