仅使用一个 div 的幻灯片动画答案

【问题标题】：Slide animation only with one div仅使用一个 div 的幻灯片动画
【发布时间】：2013-09-12 15:18:31
【问题描述】：

我有一个小问题，我想创建一个幻灯片动画。你可以看到我的代码： 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);});

感谢您的宝贵帮助。

【问题讨论】：

你的代码搞砸了...尝试修复它

标签： jquery css animation this mouseover

【解决方案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');

【讨论】：

【解决方案2】：

Try this，使用$(this)！

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

【讨论】：

【解决方案3】：

DEMO

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

.hover()

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

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

【讨论】：