Question

好吧所以我有点困惑，我尝试了任何东西，但仍然无法动画我的链接背景颜色，甚至简单警报，帮我解决问题：

/* jQuery */

$(document).ready(function () {

    $("#menu a").mouseover(function () {
        $(this).animate({ "left": "-=50px" }, "slow");

    });


});

HTML：

<div id="menu">
<ul>
<li><a href="http://www.xn----2hckboeejufb0a1k.com/">One</a></li>
<li><a href="http://www.xn----2hckboeejufb0a1k.com/">Two</a></li>
<li><a href="http://www.xn----2hckboeejufb0a1k.com/">Three</a></li>
</ul>
</div>

谢谢！

Answer 1

您的示例工作得很好......请参阅：http://jsfiddle.net/georeith/MhmAm/

除非left元素具有非静态位置属性，否则a属性将无效。

如果没有插件，您也无法为属性background-colour制作动画。请参阅：https://github.com/jquery/jquery-color

否则确保您正确加载jQuery库并检查控制台是否有任何错误。

Answer 2

尝试添加不透明度。

$（本）.animate（{ 不透明度：0.25，左：＆＃39; - = 50＆＃39;，身高：＆＃39;切换＆＃39; }，＆＃39;慢＆＃39;）;

Answer 3

   $("#menu a").mouseover(function () {
        changeColor($(this),["olive","red","blue","white"]);
    });
    function changeColor(component,colors){
        var firstColor = colors[0];
        for(var i in colors){
            component.animate({ backgroundColor: colors[i]}, 'slow' , function(){
                if(colors.length < (i + 1)){
                    component.animate({ backgroundColor: colors[i + 1]},'slow',function(){
                        component.animate({ backgroundColor: firstColor}, 'slow');
                    });
                }
            });
        }
    }

jQuery动画导航栏，无法动画

3 个答案: