2

我有以下导航

<nav>
   <a href="#" class="current">HOME</a>
   <a href="#">ABOUT</a><a href="#">CONTACT</a>
</nav>

使用这种样式：

nav a {
    font-family: monospace;
    display: inline-block;
    width: 114px;
    height: 29px;
    font-size: 14px;
    line-height: 29px;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: #004870;
}
nav a {
    margin-left: 7px;
}
nav a.current{
    background-color: #585858;
    color: white;
}

并希望将 BG 颜色设置为动画，mouseover然后再将#585858样式属性重新删除。#a3a3a3mouseleave

我尝试了这段代码，但 style 属性仍然存在mouseleave：

$(document).ready(function() {
   $('nav a:not(.current)').mouseenter(function() {
   $(this).stop().animate( {
          backgroundColor: '#585858'
   }, 300);
});
$('nav a:not(.current)').mouseleave(function() {
$(this).stop().animate( {
    backgroundColor: '#004870'
}, 300).removeAttr('style');
    });
});

那么动画完成后需要做哪些修改来移除style属性呢？

4

6 回答 6

9

你在这里错过了一个事实，那jQuery.animate就是异步的，所以你removeAttr在动画结束之前被调用。您应该使用完整的回调来调用removeAttr.

您还需要jQuery.Color()插件jQuery.animate才能制作动画background-color。

var $this = $(this);
$this.stop().animate({ backgroundColor: jQuery.Color("rgb(0, 72, 112)") }, {
    duration: 300,
    complete: function() { $this.removeAttr('style') }
});
于 2013-01-17T08:32:14.700 回答
0

您需要 jquery-ui 插件来为颜色设置动画。看看你的代码，包括当前的 jquery ui：http: //jsfiddle.net/sUeBd/1/

$(document).ready(function(){
  $('nav a:not(.current)').mouseenter(function(){
    $(this).stop().animate({
            backgroundColor: '#585858'
    }, 300);
  });
  $('nav a:not(.current)').mouseleave(function(){
    $(this).stop().animate({
        backgroundColor: '#004870'
    }, 300).removeAttr('style');
  });
});
于 2013-01-17T08:26:47.283 回答
0

你不能用动画改变背景颜色......如果你需要，那么你必须使用jQuery.Color()插件。你可以为此加载jquery ui插件

根据文档..

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左侧可以进行动画处理，但背景颜色不能进行动画处理，除非使用了 jQuery.Color() 插件）。除非另有说明，否则属性值被视为像素数。可以在适用的情况下指定单位 em 和 %。

文档在这里

并摆弄ui 插件

于 2013-01-17T08:27:02.457 回答
0

jQuery 不能为颜色设置动画，但你可以像这样添加 jQuery 插件

<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>

http://jsfiddle.net/gRTHv/1/

于 2013-01-17T08:37:00.330 回答
0

CSS3需要Chrome, Safari, Opera,Firefox 5+或的版本IE10

nav a:not(.current) { 
    animation:navOut 1s forwards; 
}

nav a:not(.current):hover { 
    animation:navOver 1s forwards; 
}

@keyframes navOver { 
    to { background-color:#a3a3a3; } 
}

@keyframes navOut { 
    from { background-color:#a3a3a3; } 
    to { background-color:#004870;} 
}

http://jsfiddle.net/pbaris/d6msw/

于 2013-01-17T09:01:43.670 回答
0

您可以使用 CSS 处理此事件。无需使用 java 脚本。

用这个更新你的 CSS 代码

nav a 
{
    font-family: monospace;
    display: inline-block;
    width: 114px;
    height: 29px;
    font-size: 14px;
    line-height: 29px;
    text-align: center;
    text-decoration: none;
    color: white;
    background:#a3a3a3;
}
nav a {
    margin-left: 7px;
}
nav a.current{
     background:#585858;
    color: white;
}
nav a:hover{
    background:#585858;
}

检查这个小提琴 http://jsfiddle.net/uTYFC/2/

于 2013-01-17T09:20:59.507 回答