CODEWITHSUNDEEP
jqueryjquery-ui
Sackling
Sackling

Reputation: 1820

jquery ui fade in color then fade out.

I am trying to fade all anchor links colors in and our on mouseenter and mouseleave. This is my best effort so far. 

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

actually that my best effort was without the toggle function, which might not be appropriate here. Do I need to make 2 functions? 1 with mouseenter and 1 with mouseleave? Or is it best/possible to do with toggle?

Upvotes: 0

Views: 902

Answers (4)

Alex
Alex

Reputation: 6406

You need a jQuery plugin to animate colors: https://github.com/jquery/jquery-color

I prefer using a 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;
}

Upvotes: 0

JvZ
JvZ

Reputation: 21

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

Try this :)

Upvotes: 2

m90
m90

Reputation: 11812

Your syntax is wrong. animate is used like this:

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

See this fiddle: http://jsfiddle.net/ZtBpM/1/

Your approach for the mouseout (rather use this than mouseleave - same goes for mouseover instead of mouseenter) is ok (just do the same thing with a different event), although you could also use hover http://api.jquery.com/hover/ which will allow you to bind the functions for mouseover and mouseout in a single call.

Upvotes: 1

Gabriel Santos
Gabriel Santos

Reputation: 4974

Insert http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js below jQuery and add the follow code to your element:

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

Upvotes: 0

Related Questions