Question

我试图淡化所有锚链接颜色和我们的mouseenter和mouseleave。到目前为止，这是我的最大努力。

$(document).ready(function(){  
    $('a').on('mouseenter' , function(){
    $(this).toggle(function (){
        animate({color:"#ee860a"})
            });
        }   
    );
});

实际上，我的最大努力是没有切换功能，这可能不合适。我需要制作2个功能吗？ 1用mouseenter和1用mouseleave？或者最好/可能做到切换？

Answer 1

$(document).ready(function(){  
   $('a').hover(function(){
      $(this).animate({color:"#ee860a"});      
   }, function() {
      $(this).animate({color:"#999"});
   });
});

试试这个：）

Answer 2

你的语法错了。 animate的使用方式如下：

$(document).ready(function(){  
    $('a').on('mouseover' , function(){
        $(this).animate({color:"#ee860a"},'slow');
    });
});

看到这个小提琴：http://jsfiddle.net/ZtBpM/1/

mouseout的方法（而不是mouseleave使用此方法 - 同样适用于mouseover而不是mouseenter）是正常的（只需对不同的方法做同样的事情）事件），虽然您也可以使用hover http://api.jquery.com/hover/，这样您就可以在一次调用中绑定鼠标悬停和鼠标输出的功能。

Answer 3

在jQuery下面插入http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js并将以下代码添加到您的元素中：

$('#elementToEffect').animate({color: '#ee860a'})

Answer 4

你需要一个jQuery插件来动画颜色： https://github.com/jquery/jquery-color

我更喜欢使用CSS3 solutin：

http://jsfiddle.net/ySwAG/2/

a{
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    color:#000;
}
a:hover{
    color:#ee860a;
}

jquery ui淡出颜色然后淡出。

4 个答案: