Question

您好我正在使用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的动画，我试图给一个href一个id，仍然没有工作

Answer 1

尝试使用e.preventdefault()

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

    });

Answer 2

您需要确保div具有指定的宽度才能设置动画，例如：

#social {
    width: 20px;
}

<强> Fiddle Demo

Answer 3

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

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

Fiddle demo

Answer 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'});



      });

       });

div内容没有动画

4 个答案: