Question

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

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

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

经过多次阅读后，我发现我需要使用＆＃34;这个＆＃34;所以我试过了：

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

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

然而，这只是完全禁用动画，我尝试使用＆＃34; .next＆＃34;还有许多其他组合也导致动画被禁用。

简而言之，我有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动画可防止所有盒子一起滑动

2 个答案: