javascript - jQuery Slide on Hover 单独移动

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')

...它只会作用于正确的元素。