Question

这是我的鼠标悬停代码：

$('.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秒，鼠标效果，然后移动到第二个.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>

在document.ready。

调用

doReady

谢谢！

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

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

1 个答案: