Javascript jQuery动画无法工作（即使示例也无法工作）

我试图让一个简单的jQuery动画工作，但我似乎无法实现它。我不确定我是否忽略了一个简单的语法问题或更大的问题。我在网上找到的样本似乎也不起作用，所以我想我应该试着征求第二种意见

头部的相关部分如下所示：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {

$('.menu_ul li').mouseenter(
function() {
    $('#menuitem1').animate({
        'background-image': 'linear-gradient(to bottom, #1058c4 0%, #1058c4 100%)',
        'color' : '#ffffff'
    },500);
}
);


$('.menu_ul li').mouseleave(
function() {
    $(this).animate({
        'background-image' : 'linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%)',
        'color' : '#343434'
    },500);
}
);

});
</script>

<ul class="menu_ul" style="display:block;position:absolute">
    <li id="menuitem1"><a href="?content=home">HOME</a></li>
    <li id="menuitem2"><a href="?content=home">PLAYLIST</a></li>
    <li id="menuitem3"><a href="?content=home">COMMUNITY</a></li>
    <li id="menuitem4"><a href="?content=home">ABOUT US</a></li>
</ul>

.menu_ul li {   
    padding-top:13px;
    text-align:center;
    display:block;
    float:left;
    color:#343434;
    width:237px;
    height:35px;    
    background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%); 
}

---

提前感谢。

这里有一种方法可以通过在次要元素上更改不透明度来更改背景渐变：

HTML

CSS

但让我们在这里说实话-CSS3更好。取决于所需的浏览器支持

HTML

---

.

jQuery core.animate方法不会为颜色设置动画。您必须包括颜色插件或jQuery UI。啊，我明白了！成功了。我该如何让“背景图像”发挥作用呢？我不能——我想出来了。我必须改变我的颜色。谢谢就像@nnnnnn所说的，你需要设置颜色、字体、背景等的动画。你可能需要做一些黑客操作来设置背景图像/渐变的动画-也许可以更改你的ul后面的div的不透明度？

<ul class="menu_ul" style="display:block;position:absolute">
    <li id="menuitem1"><a href="?content=home">HOME</a><span>&nbsp;</span></li>
    <li id="menuitem2"><a href="?content=home">PLAYLIST</a><span>&nbsp;</span></li>
    <li id="menuitem3"><a href="?content=home">COMMUNITY</a><span>&nbsp;</span></li>
    <li id="menuitem4"><a href="?content=home">ABOUT US</a><span>&nbsp;</span></li>
</ul>

$('.menu_ul a').mouseenter(
    function() {
        $(this).siblings('span').animate({
            'opacity' : 1
        },500);
    }
);


$('.menu_ul a').mouseleave(
    function() {
        $('.menu_ul span').animate({
            'opacity' : 0
        },500);
    }
);

.menu_ul li {
    padding:12px 0;
    margin:0;
    text-align:center;
    display:block;
    float:left;
    color:#343434;
    width:237px;
    height:35px;
    position:relative;
    background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%); 
}
.menu_ul a,
.menu_ul span{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}
.menu_ul a{
    z-index:1;
    line-height:55px;
    display:block;
}
.menu_ul span{
    opacity:0;
    z-index:0;
    display:block;
    background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%); 
}

<ul class="menu_ul" style="display:block;position:absolute">
    <li id="menuitem1"><a href="?content=home">HOME</a></li>
    <li id="menuitem2"><a href="?content=home">PLAYLIST</a></li>
    <li id="menuitem3"><a href="?content=home">COMMUNITY</a></li>
    <li id="menuitem4"><a href="?content=home">ABOUT US</a></li>
</ul>

.menu_ul li {
    padding:0;
    margin:0;
    text-align:center;
    display:block;
    float:left;
    width:237px;
}
.menu_ul a{
    margin:0;
    padding:12px 0;
    display:block;
    color:#343434;
    background-image: linear-gradient(to bottom, #A2A2A2 0%, #7D7D7D 100%);
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
.menu_ul a:hover{
    color:#fff;
    background-image: linear-gradient(to bottom, #A2A2A2 0%, #000000 100%); 
}