私はクリック時に発生するアニメーションを持っています。jquery animation
私は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のユーザーフレンドリーな彼らがクリックされ、それが
jqueryについての質問はありません。 – Adam
アダムよりも...あなたの質問は(フィドルがなくても)、私には、このようにかなり見えます。だから私はいくつかのCSSについて尋ねました。 http://jsfiddle.net/roXon/wzkwN/ –
私はフィドルを使い始めるべきだと思います。アニメーションが終了する前にボックスをクリックすると、問題が表示されます。 – Adam