jquery - 仅使用一个 div 的幻灯片动画

Question

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

但是正如你所看到的，当我们在一个 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

试试这个，使用$(this)！

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

Answer 3

演示

使用它作为选择跨度的上下文

。徘徊（）

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

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