Question

我知道有解决方案可以解决这个问题;但是我想在我自己的＆＃34;上做到这一点。（你必须知道你的局限性：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-expression。

对于如何自动运行整个事情的第一个块，你真的已经帮了我很多。

Answer 1

我建议你把它放在一个函数中，设置一个你将在函数末尾用setTimeout(function(){yourFunctionName();}, givenTime)设置的全局变量。

这样你的函数会定期调用，你可以在事件悬停时调用clearTimeout(yourTimeoutGlobalVariable);。

PS：我没有写完整个剧本，所以你可以按照自己的方式做到这一点，告诉我你是否仍然被卡住了。

Answer 2

您可以使用.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

自动执行CSS更改

2 个答案: