CODEWITHSUNDEEP
javascriptjquerycssanimationjquery-animate
matt
matt

Reputation: 157

Flashing jQuery .animation()

I'm currently using jquery-animate-colors to animate the flashing of a border, but I think my code could use some cleanup. What's a better way to approach the following?

highlightRow = function(row, count) {             
if (count == null) {                            
    count = 0;                                    
}                                               
$(row).animate({                                
    "border-color": "#3737A2"                     
}, {                                            
    duration: 250,                                
    complete: function() {                        
    return $(row).animate({                     
        "border-color": "#FFFFFF"                 
    }, {                                        
        duration: 250,                            
        complete: function() {                    
            if (count === 0) {                      
                return highlightRow(row, count += 1); 
            }                                       
        }                                         
    });                                         
    }                                             
});                                             
};

So I'm trying to have this just flash the border color on and off twice. I found that trying to animate border-color, you can't use anything besides hex codes. transparent and none both don't animate anything at all.

Anyways, looking for some help to clean this up! Thanks ahead :)

Upvotes: 5

Views: 13762

Answers (1)

Alex
Alex

Reputation: 743

There's a jQuery UI effect called 'pulsate' - http://jqueryui.com/demos/effect/ - might be worth a look?

Alternatively if you're looking for a custom solution, try the following. You can chain Animation effects and they'll all be appended to the animation queue;

higlightRow = function(row) {
  $(row).stop().animate({borderColor: "#3737A2"}, 250)
    .animate({borderColor: "#FFFFFF"}, 250)
    .animate({borderColor: "#3737A2"}, 250)
    .animate({borderColor: "#FFFFFF"}, 250);
}

Should change border colour from #3737A2 to #FFFFFF, to #3737A2, to #FFFFFF and then finish.

Upvotes: 10

Related Questions