jQuery动画可防止所有框一起滑动

Question

我有36个框，您将鼠标悬停在标题上，它会向上滑动以显示其下方的隐藏文本，而按预期的方式工作时，问题是所有36个框同时向上滑动，而不仅仅是您在此处滑过的那个我正在使用的脚本：

$(document).ready(function() {
    $('.caption').mouseenter(function(){
        $('.caption').stop().animate({height: "60%"});
    }); 

    $('.box').mouseleave(function(){
        $('.caption').stop().animate({height: "8%"},  1000, function() {
        });
    });
});

现在，经过大量阅读之后，我发现我需要使用“ this”，因此我尝试了以下操作：

$(document).ready(function() {
    $('.caption').mouseenter(function(){
        $('.caption', this).stop().animate({height: "60%"});
    }); 

    $('.box').mouseleave(function(){
        $('.caption', this).stop().animate({height: "8%"},  1000, function() {
        });
    });
});

但是，这完全禁用了动画，我也尝试使用“ .next”以及许多其他导致动画也被禁用的组合。

简而言之，我有36个框，并且我只希望您将鼠标悬停在上面的框而不是同时将它们全部向上滑动。

我是jQuery的新手，已经搜寻了数小时，但找不到确切的工作示例来说明我想要实现的目标。 非常感谢您的帮助。

Answer 1

尝试服用.caption出你的动画功能，只需使用引用this类似这样的

$(document).ready(function() {
$('.caption').mouseenter(function(){
    $(this).stop().animate({height: "60%"});
}); 

$('.box').mouseleave(function(){
    $(this).stop().animate({height: "8%"},  1000, function() {
    });
});
});

当与jquery一起使用时， this对象甚至是对事件被调用到的特定元素的引用。

Answer 2

啊，我明白了！

$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
}); 

$('.caption').mouseleave(function(){
$(this).stop().animate({height: "8%"},  1000, function() {
});
});
});

刚刚将.box更改为.caption及其工作方式，谢谢大家的帮助！ 尽管您的回答确实使我朝正确的方向迈进了一步，但我只需要做出那么小的改变，就可以将您的答案标记为正确。