自动运行 CSS 更改

Autorunning CSS-change

本文关键字：更改 CSS 运行      更新时间：2023-09-26

我知道有解决方案可以解决这个问题;但我想在我的"自己"（你必须知道你的局限性：你好堆栈溢出）的路径上完成这项工作。所以我想要一种轮播，只要用户不悬停在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 表达式。

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

您可以使用

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

波兰兹罗提 http://plnkr.co/edit/U74oTZz1G4Xu7miFmcuK?p=preview

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

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

PS：我没有写整个剧本，所以你可以"按照自己的方式"做，如果你仍然卡住了，告诉我。

相关文章：