Question

我有一点问题，我想创建一个幻灯片动画。你可以看到我的代码： click here

但正如你所看到的，当我们只在一个div上“鼠标悬停”时，所有的div都会被动画化！我想：当我们在一个div上“鼠标悬停”时，只有这个div是有生命的，而没有其他的。

$(".button span").mouseover( function() {
$(this).stop().animate({ height:"+5%"}, 500);}); }); $(function() {

$(".button").mouseout( function(){
$(".button span").stop().animate({ height:"150px"}, 500);});

$(".button").mouseover( function(){
$(".button span").stop().animate({ height:"+5%"}, 500);});

感谢您的宝贵帮助。

Answer 1

您需要使用this作为选择范围的上下文：

http://jsfiddle.net/TKcSU/

$(function () {
    $(".button").mouseout(function () {
        $('span', this).stop().animate({
            height: "150px"
        }, 500);
    });

    $(".button").mouseover(function () {
        $('span', this).stop().animate({
            height: "+5%"
        }, 500);
    });
});

备选方案可以是$(this).find('span')或$(this).children('span');

Answer 2

Try this，使用$(this)！

$(".button span").mouseover(function () {
    $(this).stop().animate({
        height: "+5%"
    }, 500);
});
$(".button span").mouseout(function () {
    $(this).stop().animate({
        height: "150px"
    }, 500);
});

Answer 3

DEMO

将此作为选择范围的上下文

.hover()

$(function () {
    $(".button").hover(function () {
        $('span', this).stop().animate({
            height: "+5%"
        }, 500);
    }, function () {

        $('span', this).stop().animate({
            height: "150px"
        }, 500);
    });
});

仅使用一个div滑动动画

3 个答案: