jquery animation

Question

私はクリック時に発生するアニメーションを持っています。

私は4つの画像を持っており、クリックで大きくしてテキストを表示したいと思います。

問題私はあなたが自由に画像をクリックすることができ、それらはすべてサイズ変更を開始し、それが動作しないようにしています。ここで

ここでHTML

<div id="nav" style="width: 980px; position: absolute; left: 100px; overflow: hidden" > 
<div class="item active"> 
    <img src="images/image1.png" width="148" height="190" /> 
    <div style="width:350px; position: absolute; left: 250px; bottom: 0px; z-index: 100"> 
     <h2 style="color:#009DD8">Title1</h2>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p> 
    </div> 
</div> 
<div class="item"> 
    <img src="images/image2.jpg" width="148" height="190" /> 
    <div style="width:350px; position: absolute; left: 250px; bottom: 0px; z-index: 100"> 
     <h2 style="color:#902272">Title2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p></div> 
</div> 
<div class="item"> 
    <img src="images/image3.png" width="148" height="190" /> 
    <div style="width:350px; position: absolute; left: -375px; bottom: 0px; z-index: 100"> 
     <h2 style="color:#68AA41">Title3</h2>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p> 
    </div> 
</div> 
<div class="item"> 
    <img src="images/image4.png" width="148" height="190" /> 
    <div style="width:350px; position: absolute; left: -395px; bottom: 0px; z-index: 100"> 
     <h2 style="color:#F5B21D">Title4</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p> 
    </div> 
</div> 

）はjQueryの

$(document).ready(function() { 
    $("#nav div.active").animate({"width": 244,"height": 316}, 1500).addClass('active'); 
    $("#nav div.active").find('img').animate({"width": 244, "height": 316}, 1500); 
    $("#nav div.active").find('div').fadeIn(100); 

    $('#nav div').click(function(){   
     if($(this).hasClass('active')) 
     { 
      $(this).animate({"width": 148, "height": 190}, 1500).removeClass('active'); 
      $(this).find('img').animate({"width": 148, "height": 190}, 1500); 
      $(this).find('div').fadeOut(500); 
     } 
     else  
     { 
      $(this).animate({"width": 244,"height": 316}, 1500).addClass('active'); 
      $(this).find('img').animate({"width": 244, "height": 316}, 1500); 
      $(this).find('div').fadeIn(100); 
      $('.active').not(this).find('img').animate({"width": 148,"height": 190}, 1500); 
      $('.active').not(this).find('div').css({"display": "none"}); 
      $('.active').not(this).animate({"width": 148,"height": 190}, 1500).removeClass('active'); 
     } 
    }); 

}です。

私は場所で.stop（）を追加しようとしましたが、これは状況を悪化させます。何か案は？

私はこれらの行を同時に起動する必要があります。イメージをもう一方のコンテナdivにサイズ変更します。私は

$(this).animate({"width": 244,"height": 316}, 1500).addClass('active'); 
$(this).find('img').animate({"width": 244, "height": 316}, 1500); 

$(this).animate({"width": 148, "height": 190}, 1500).removeClass('active'); 
$(this).find('img').animate({"width": 148, "height": 190}, 1500); 

他のそれのネジ後FireOneの場合、私は私が何をしたいのかと思い、別のは、それとリターンをキャンセルするアニメーション中にクリックすると、現在のアニメーションがまだマシ完了するまで、またはクリック機能遅延であります通常の状態にニコラ・C.

にonclickの機能に

信用を発射する前に、私はまた、

$('#nav div').click(function(){ 

    if(!$('#nav div').is(':animated')) 
    { 
     if($(this).hasClass('active')) 
     { 
      $(this).animate({"width": 148, "height": 190}, 1500).removeClass('active'); 
      $(this).find('img').animate({"width": 148, "height": 190}, 1500); 
      $(this).find('div').fadeOut(500).stop(true, true); 
     } 
     else  
     { 
      $(this).animate({"width": 244,"height": 316}, 1500).addClass('active'); 
      $(this).find('img').animate({"width": 244, "height": 316}, 1500); 
      $(this).find('div').fadeIn(100).stop(true, true); 

      $('.active').not($(this)).find('img').animate({"width": 148,"height": 190}, 1500); 
      $('.active').not($(this)).find('div').fadeOut(500).stop(true, true); 
      $('.active').not($(this)).animate({"width": 148,"height": 190}, 1500).removeClass('active'); 
     } 
    } 
}); 

作品ではなく、Vを試してみましたERYのユーザーフレンドリーな彼らがクリックされ、それが

Answer 1

機能を.animate()コールバックを利用してみ応じるdoesntの場合 -

$('.active').not(this).animate({"width": 148,"height": 190}, 1500, function() { 
    $(this).removeClass('active'); 
}); 

Answer 2

次のような他のアニメーションのための完全なコールバックを使用してみてください：

$("first_animation").animate({"width": 244,"height": 316}, 1500, 'swing',function(){ 
    $("second_animation").animate({"width": 244,"height": 316}, 1500, 'swing',function(){ 
    $("third_animation").animate({"width": 244,"height": 316}, 1500, 'swing'); 
    }) 
}) 

を

上記のコードは、first_animation、second_animation、およびthird_animationの3つのdivをすべてアミノ化します。一つずつ。

Answer 3

これは最善の解決策ではないかもしれませんが、私があなたのイメージを24x24アイコンで置き換え、あなたが期待している最終的な動作を想定していることを知りたい場合は、

含む個別のCSSファイル：

div.item{ 
    height: auto; 
    border: 1px solid red; 
} 
img.icon{ 
    display: inline; 
    position: relative; 
    top: 0px; 
} 

div.content{ 
    display: inline-block; 
    position: relative; 
    top: 0px; 
} 

div.inactive div.content{ 
    display: none; 
} 
div.inactive{ 
    width: 16px; 
    height: 16px; 
} 

HTML部分：

<div id="nav" style="width: 980px; position: absolute; left: 100px; overflow: hidden" > 
<div class="item inactive"> 
    <img class="icon" src="images/image1.png" width="16" height="16" /> 
    <div class="content"> 
     <h2 style="color:#009DD8">Title1</h2>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p> 
    </div> 
</div> 
<div class="item inactive"> 
    <img class="icon" src="images/image2.png" width="16" height="16" /> 
    <div class="content"> 
     <h2 style="color:#902272">Title2</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p></div> 
</div> 
<div class="item inactive"> 
    <img class="icon" src="images/image3.png" width="16" height="16" /> 
    <div class="content"> 
     <h2 style="color:#68AA41">Title3</h2>  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p> 
    </div> 
</div> 
<div class="item inactive"> 
    <img class="icon" src="images/image4.png" width="16" height="16" /> 
    <div class="content"> 
     <h2 style="color:#F5B21D">Title4</h2> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis</p> 
    </div> 
</div> 

javascriptの一部：

$(document).ready(function() { 
    $('#nav div.item').click(function(){ 
     var myItems = $('.item'); 
     var pendingAnimation = false; 
     for(var i = 0; i < myItems.length; i++) 
     { 
      if($(myItems[i]).is(':animated')){ 
       pendingAnimation = true; 
       break; 
      } 
     } 
     if(!pendingAnimation){ 
      //extend the item 
      $(this).animate({"width": 700, "height": 150}, 1500); 
      //make it an active item 
      $(this).addClass('active'); 
      //grow the icon 
      $(this).find('img').animate({"width": 24, "height": 24}, 1500); 
      //make the content of the item fade in 
      $(this).find('div.content').fadeIn(100); 

      //Fading out the content of all the other active elements 
      $('.item').not($(this)).find('div.content').fadeOut(500); 
      //Shrinking all the other active icons 
      $('.item').not($(this)).find('img').animate({"width": 16,"height": 16}, 1500); 
      //Shrinking all the other active items 
      $('.item').not($(this)).animate({"width": 16,"height": 16}, 1500); 
      //making all the other items as "inactive" 
      $('.item.active').removeClass('active').addClass('inactive'); 
     } 
    });   
}); 

効果：あなたがアイコン上にクリックしたときに、それがクリックされたdiv要素を拡大。アイテムをアクティブにし、逆のアニメーションで他の「アクティブな」要素をアニメーション化します。