div 内容没有动画答案

【问题标题】：div content doesn't animatediv 内容没有动画
【发布时间】：2014-02-18 09:32:36
【问题描述】：

您好，我正在使用 jquery 为左侧的框设置动画以向右滑动以显示 facebook 链接，框滑动正常但里面的文本似乎不受 jquery 功能的影响，我的代码是：

JQUERY

$(document).ready(function () {

    $("#social").mouseenter(function () {

        $("#social").animate({
            width: 50
        });

    });

    $("#social").mouseleave(function () {

        $("#social").animate({
            width: 20
        });

    });

});

HTML

<div id="social"><a href="xxxx.com">test</a></div>

问题在于 a href ，它没有与 div 动画，我试图给 a href 一个 id ，仍然没有工作

【问题讨论】：

“不使用div 制作动画”是什么意思？您可以发布一个显示问题的 JSFiddle 吗？
您还需要<a href> 与 div 一起扩展吗？

标签： javascript jquery html jquery-animate

【解决方案1】：

试试e.preventdefault()

$("#social").mouseenter(function () {
       e.preventdefault();
        $("#social").animate({
            width: 50
        });

    });

【讨论】：

【解决方案2】：

您需要确保您的 div 具有指定的宽度以使其具有动画效果，例如：

#social {
    width: 20px;
}

Fiddle Demo

【讨论】：

【解决方案3】：

不确定这是否是您想要的，但如果您希望 <a> 与 <div> 一起扩展，只需在您的 CSS 中添加 display: inline-block; 和 width: 100%;：

#social a {
    display: inline-block;
    width: 100%;
}

Fiddle demo

【讨论】：

【解决方案4】：

谢谢大家，我找到了解决方案，我需要更改 marginLeft 以使带有链接的整个框看起来有点隐藏然后显示

   $(document).ready(function(){

    $("#social").mouseenter(function(){


$("#social").animate({width:80});
$("#social").animate({marginLeft:'0px'});



     });

      $("#social").mouseleave(function(){


$("#social").animate({width:40});
$("#social").animate({marginLeft:'-10px'});



      });

       });

【讨论】：