自动执行CSS更改 [英] Autorunning CSS-change

问题描述

我知道有解决方案可以解决这个问题;但我想在我自己的自己（你必须知道你的限制：Hello stackoverflow）路径上完成这个。所以我想要一种旋转木马，只要用户没有悬停在ul区域，整个ul元素就会在每个设定的时间间隔内得到一个负边距。所以它最初是这样的：

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

这样的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 - 区域悬停。

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.

我那里需要做2件事：
- 使用不同的处理程序（？）然后.ready（或告诉脚本重新开始）
- 和if-expression来检测用户是否徘徊区域。

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.

推荐答案

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

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

这篇关于自动执行CSS更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！