2012-04-21 3 views
1

divをアニメーション化(スライドダウン)する方法はありますか?たとえば、ページ上の特定の位置にの場合はのみですか?特定の位置にある場合のみdivをアニメーション化する方法は?

たとえば、すべて同じクラス.ALLCONTENTを持つ4つのdivがありますが、ボタン(クラス.BUTTONSを持つ)をクリックすると、上から30ピクセルのdivだけが下にアニメーション表示され、残りは残ります同じ場所。

基本的にdivを特定の位置にスライドさせます。そのdivの位置が既にそれより下にスライドしていない場合は、 IDを割り当てることができない場合は、私が

$(".BUTTONS").click(function(){ 
    $(".ALLCONTENT").animate({"top":"+=558px"}, 250, 'linear'); 
}); 
+2

その相対的な位置を確認したい場合は? – ChrisW

+0

jsfiddler http://jsfiddle.net/ – Mahipal

答えて

2

使用

if($(".ALLCONTENT").offset().top === 20) { 
    //Do something 
} 

文書/本文への絶対位置を確認したい場合

および

if($(".ALLCONTENT").css("top") === "20px") { 
    //Do something 
} 

または

if($(".ALLCONTENT").position().top === 20) { 
    //Do something 
} 

あなたはdiv要素は、異なるIDを持つことができないのはなぜ

+0

最初と最後のコードサンプルでトリプルイコールが必要な理由は何ですか? – Cameron

+0

いいえ、あなたはdouble equalsも使うことができます...ちょっとちょっと速いので私はちょうど厳密な比較に慣れています –

+0

きちんとしていませんでした。私はそれを知らなかった – Cameron

0

で今抱えている問題は、この使用(でも私はイメージできませんが):

if($(".ALLCONTENT").css("top") == "20px") { 
//Do something 

} 
0
$(".BUTTONS").click(function(){ 
    $(".ALLCONTENT").each(function(i){ 
     if($(this).css("top")=="30px"){ 
      $(this).animate({"top":"558px"}, 250, "linear"); 
     } 
    }) 
}); 
関連する問題