Javascript jQuery动画防止所有框一起向上滑动

我有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新手，已经搜索了好几个小时，但找不到一个我希望实现的工作示例。非常感谢您的帮助。

请尝试从动画功能中删除

.caption

，然后像这样使用对

的引用

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

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

与jquery一起使用时，
this
对象甚至是对调用事件的特定元素的引用
 啊，我明白了

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

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

刚刚将.box改为.caption，并且可以正常工作，谢谢你们的帮助！
我会把你的答案标记为正确的，因为你的答案确实让我走上了正确的方向，我只需要做一点小小的改变
 您还可以提供一些html吗？您可以为您的工作提供一个提琴吗？请尝试将.caption从动画函数中去掉，只使用this object，因为this object是对调用事件的特定对象的引用。很抱歉，回复太晚了@b使用上述“是”选项，现在一次只能向上滑动一个框，但是，当它向上滑动时，标题将保留在容器顶部，当您再次移动时，下面的文本将朝上。。。。我会试着用小提琴来展示我在说什么。我仍然不确定你到底是什么意思。你有什么问题？