jQueryが - タイマーとアニメーションを継続 - アニメーションが

がここにマウスオーバーのための私のコードでどのように機能するかについては不明：jQueryが - タイマーとアニメーションを継続 - アニメーションが

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

私はこれはで動作する4つのボックス、クラス.captionですべてを持っています。私はこれらのアクションを、次のアクションに移る前にある秒数（例えば、5秒）で4つの間で回転させたいと考えています。言い換えれば、mousedownの効果（マウスを持たないで）、5秒待って、マウスアップ効果、そして2番目の.captionに移動して、同じことをするなど...

ここは私が45分です後でそうです。

<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で呼び出されます。ここでは

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です。

ありがとうございます！

出典

2012-02-09 SH56

使用しているHTMLを投稿できますか？何がdoRotateを呼び出しますか？ – j08691

@ j08691ちょうどそれを編集しました。ありがとう！ – SH56

まず第一に、あなたはこれがあなたが望むものを達成する2つの動作

のないミックス、組み合わせでのMouseEnter/mouseleaveまたはマウスオーバー/マウスアウトを使用する必要があります。各キャプションは、以前のアニメーションのコールバックで実行されます。我々は、要素をfxキューに入れるためにqueueを使います（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>

出典

2012-02-09 17:33:42 Kato

それはそれぞれ一つずつ回転しているようには見えませんが、一度にすべてを行います。 – SH56

ああ、アイテムが別のキューに追加されるようです。 1.7では、それらを同じキューにドロップするオプションがあります。これはコールバックよりも少し優雅です。 > = 1.7以上ですか？私はどちらかの方法で私の例を修正します。 – Kato

ああ、jQuery UIは1.7と一緒に行かない:) brb ... – Kato

jQueryが - タイマーとアニメーションを継続 - アニメーションが

答えて

関連する問題