javascript - 自动运行CSS更改

我知道有解决方案可以解决这个问题；但是我想在我的“自己的”（您必须了解自己的局限性：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来检测用户是否将鼠标悬停在该区域上。

关于如何自动运行整个程序的第一个步骤，您确实已经对我有很大帮助。

最佳答案

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

关于javascript - 自动运行CSS更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38334119/