javascript - jQuery SlideonHoverの個別の動き

Question

マウスが終わったときにテキストを移動するためのスタイルをいくつかの助けを借りて作成しました。私の問題は、動きを分離できないことです。私がいずれかのボックスを超えた場合、すべてのボックスが効果を発揮します。

$(document).ready(function(){
    $('.up-down').mouseover(function(){
        $('.default').stop().animate({
            height: 200    
        }, 200);                        
    }).mouseout(function(){
        $('.default').stop().animate({
            height: 240 
        }, 200)    
    })
});

見るにはここにあります：http：//jsfiddle.net/snHhN/

Answer 1

現在ホバーされている要素の子を選択する必要があります。

$(document).ready(function(){
    $('.up-down').mouseover(function(){
        $(this).children('.default').stop().animate({
            height: 200    
        }, 200);                        
    }).mouseout(function(){
        $(this).children('.default').stop().animate({
            height: 240 
        }, 200)    
    })
});

デモ

Answer 2

使用しているため$('.default')、クラスのデフォルトを持つ要素が処理されます。

.default が .up-down 内にある場合は、使用できます

$(this).find('.default')

...そして、正しい要素にのみ作用します。