Question

我试图让一个简单的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>

HTML如下：

<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>

它的CSS如下：

.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%); 
}

提前致谢。

Answer 1

这是在次要元素上使用不透明度更改来更改背景渐变的一种方法：

HTML

<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>

的jQuery

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


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

CSS

.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%); 
}

jsFiddle Here

但是，让我们在这里真实 - CSS3更好。（取决于所需的浏览器支持）

HTML

<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>

CSS

.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%); 
}

jsFiddle

jQuery Animate赢了工作（甚至样本都没有）

1 个答案: