javascript - .动画到一个元素

Question

我正在使用此功能进行动画悬停：

    function lookbookhover(){
        var lookbook = $('.lookbook_info')
        lookbook.bind({
            'mouseenter' : function(){
                lookbook_animate(200)
            },
            'mouseleave' : function(){
                lookbook_animate(30)
            }
        })
    }
    function lookbook_animate(h){
        $('.lookbook_info').animate({
            height: h
        }, 300 );
    }

我遇到的问题是，当用户悬停一个项目（.lookbook_info）时，它会为页面上的所有其他 .lookbook_info 设置动画，我怎么能指向只为一个元素设置动画？

我知道它正在使用 $(this) 但我还没有得到结果。

Answer 1

只需将元素传递给函数：

function lookbookhover(){
    $('.lookbook_info').on({
        mouseenter : function(){
            lookbook_animate(this, 200);
        },
        mouseleave : function(){
            lookbook_animate(this, 30);
        }
    });
}
function lookbook_animate(elem, h){
    $(elem).stop(true,true).animate({
        height: h
    }, 300 );
}

示范

Answer 2

$(this)如果您想指向发生事件的元素，或者如果您想选择特定元素，例如可能是第一个、最后一个或第 n 个子元素，则可以使用：

$(element:first)

$(element:last)

$(element:nth-child(2))

您需要this作为参数传递给该函数。