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 并正常工作，谢谢大家的帮助！不过，我会将您的回答标记为正确，因为您的回答确实使我朝着正确的方向前进，而我只需要进行很小的更改即可。

jQuery 动画防止所有盒子一起向上滑动

jQuery animate prevent all boxes sliding up together

javascript

jquery

animation

slide

jquery-animate