jquery - jQuery动画导航栏，不能动画

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

尝试添加不透明度兄弟。

$(this).animate({ opacity: 0.25, left: '-=50', height: 'toggle' }, 'slow');

Answer 2

   $("#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');
                    });
                }
            });
        }
    }

Answer 3

你的例子工作得很好......见：http: //jsfiddle.net/georeith/MhmAm/

除非元素具有非静态位置属性，否则该left属性将不起作用。a

background-colour如果没有插件，您也无法为属性设置动画。见：https ://github.com/jquery/jquery-color

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