Jquery - 使用计时器继续动画 - 不清楚动画是如何工作的答案

【问题标题】：Jquery - continuing an animation with a timer - unclear about how animation worksJquery - 使用计时器继续动画 - 不清楚动画是如何工作的
【发布时间】：2012-03-02 01:16:59
【问题描述】：

这是我的鼠标悬停代码：

$('.caption').mouseover(function() {
    $(this).fadeTo('slow',1);
    $(this).css('color','#ddd').animate({'color': 'white'}, 500); 
    $(this).css('font-weight','bold');
});

$('.caption').mouseleave(function() {
    $(this).fadeTo('slow',0.9);
    $(this).css('color','white').animate({'color': '#ddd'}, 500); 
    $(this).css('font-weight','normal');
});

我有四个可以使用的框，都带有 .caption 类。我想让这些动作在它们四个之间旋转，并在移动到下一个之前暂停一定的秒数（比如 5 秒）。换句话说，mousedown 效果（没有 mousedown），等待 5 秒，mouseup 效果，然后移动到第二个 .caption，然后做同样的事情......等等。

这是我所在的位置，大约 45 分钟后。

function doRotate(num) {

    var len = 3; // starts at 0
    var index = num;

    $('div .nav-piece').each = function() {
        setInterval(function() {
            $('div .nav-piece').eq(index).animate({
                backgroundColor: "white"
            }, 500);
        }, 500);

        setInterval(function() {
            $('div .nav-piece').eq(index).animate({
                backgroundColor: "#cfc4c3"
            }, 500);
        }, 500);
    }
}

这里是html：

 <div id="nav-container">
        <div id="piece1" class="nav-piece">
            <div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
                <div class="caption overlay-top">Text example</div>
            </div>
        </div>
          <div id="piece2" class="nav-piece">
            <div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
                <div class="caption overlay-bottom">Text example</div>
            </div>
        </div>
          <div id="piece3" class="nav-piece">
            <div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
                <div class="caption overlay-top">Text example</div>
            </div>
        </div>
          <div id="piece4" class="nav-piece">
            <div style="background-image: url('assets/bg_example.jpg'); background-repeat: no-repeat;">
                <div class="caption overlay-bottom">Text example</div>
            </div>
        </div>
    </div>

doReady 在 document.ready 中被调用。

谢谢！

【问题讨论】：

你能发布你正在使用的 HTML 吗？什么叫 doRotate？
@j08691 刚刚编辑了。谢谢！

标签： jquery animation timer

【解决方案1】：

首先，您应该结合使用 mouseenter/mouseleave 或 mouseover/mouseout，而不是混合使用这两种行为

这将实现您想要的。每个字幕都在先前动画的回调中执行。我们使用 queue 将元素放入 fx 队列（唯一的地方 delay() 起作用）。

我会把它扔在小提琴上，但小提琴今天似乎处于只读模式！ :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>test url stuff</title>


   <style type="text/css">
      .caption { width: 50px; height: 50px; margin: 20px; padding: 5px; float: left; }
      .red { background-color: red; }
      .blue { background-color: blue; }
      .yellow { background-color: yellow; }
      .green { background-color: green; }
      .black { background-color: black; }
   </style>

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

</head>
<body>

<script type="text/javascript">
   jQuery(function($) {
      var
         // how long should it animate?
         howLong = 1000,

         // apply the font-weight when animation completes
         mouseInProps = {duration: 500, complete: function() { $(this).css('font-weight','bold');} },

         mouseOutProps = {duration: 500,
            complete: function() {
               var $this = $(this);
               // apply the font-weight when animation completes
               $this.css('font-weight','normal');
               if( $this.next().length ) {
                  // this makes them successively call the next element and animate it
                  // by using the complete: callback on animate's props
                  queueOne($this.next());
               }
            }
         };

      function queueOne($e) {
         $e.queue(function(){
            $(this).fadeTo('slow', 1).animate({'color': '#fff'}, mouseInProps).dequeue();
         })
         // make the queue pause x seconds
         .delay(howLong)
         // apply the mouseleave effects
         .queue(function() {
            $(this).fadeTo('slow', .9).animate({'color': '#ddd'}, mouseOutProps).dequeue();
         });
      }

      queueOne($('.caption').first());
   });
</script>

<div class="caption red">one</div>
<div class="caption green">two</div>
<div class="caption blue">three</div>
<div class="caption yellow">four</div>
<div class="caption black">five</div>

</body>
</html>

【讨论】：

哦，看起来项目被添加到不同的队列中。 1.7 中有一个选项可以将它们放到同一个队列中，这比回调更优雅一些；你在> = 1.7吗？不管怎样，我都会纠正我的例子。
好的，什么版本的 jQuery UI？（这是为背景颜色设置动画所必需的）
嗯，由于某种原因，它现在只为第一个动画。奇怪的是它对你有用......我会试着从这里拿走它，除非你知道一个快速修复。我欠你一杯咖啡，只是我不能通过互联网管道。 :)
嗯，这很奇怪。好吧，让我知道你发现了什么！
我发现它在 IE 中产生了内存错误。我可以纠正它的唯一方法是升级到 jQuery 1.5.1 或更高版本；您应该使用示例尝试一下，看看它是否也解决了您的问题。