2012-02-10 13 views
5

これは動作しますが、私はその理由はわかりません。 function capIn()では、私の心の中で、$botcap.slideDown("slow")という行はdivを下にスライドさせるべきです。それはそれをスライドさせる。 .slideUp()を使用しようとすると、スライドさせようとしても何も起こりません。誰も私にこれを説明することはできますか?JQuery .slideDown()がスライドアップしています

$(".slide").hover(capIn, capOut); 

function capIn(){ 
    //slide top caption down 
    var $topcap = $(this).children(".topcap"); 
    $topcap.slideDown("slow"); 

    //slide bottom caption up 
    //!! Why does slideDown slide caption up here? 
    var $botcap = $(this).children(".botcap"); 
    $botcap.slideDown("slow") 
} 

function capOut(){ 
    //slide top back up 
    var $topcap = $(this).children(".topcap"); 
    $topcap.slideUp("slow"); 

    //slide bottom back down 
    var $botcap = $(this).children(".botcap"); 
    $botcap.slideUp("slow"); 
} 
+3

デモをhttp://www.jsfiddle.netで公開することができますか? – Rafay

+0

デモを作成することができますか?フィドル - あなたの説明を視覚化するのは難しいです。 –

+0

HTMLとCSSで何が起こっているのかについて、より多くのマークアップが必要です。このjavascriptに基づいてちょうど悪いことを伝えるのは難しい – Downpour046

答えて

9

jQueryのslideDownslideUp機能は、実際にmisnomersです。 slideUpのドキュメントでは、次のように書いています。

一致する要素をスライディングモーションで非表示にします。

隠蔽は要素の高さを変更することによって実現されます。通常、これは要素の下端が上に移動するように見えることを意味します。しかし、要素が下部に固定されている場合(たとえば、position: absoluteおよびbottom: 0に設定すると)、高さの変更によって上端が滑って見えるようになります。

+0

興味深い。それを説明していただきありがとうございます。 –

0

1つの可能な修正は、$('.botcap')要素をコンテナで包んでコンテナを底部に整列させることです。

+0

あなたはコンテナの高さが '.botcap'の目に見える高さに設定されていることを確認する必要があります。 –

0

同じ問題が発生したので、この質問に目を通しましたが、自分で答えが見つかりました。これは、要素を絶対位置と底面に配置するためです:0;これは実際には要素がボトムベースであるかのように扱うため、そのslideDown()は上に向かっています。 0:

関連する問題