Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 320
matt Avatar asked Jul 23 '11 15:07

matt


People also ask

How can use jQuery to animate a flash to the button?

Pure jQuery solution. var flash = function(elements) { var opacity = 100; var color = “255, 255, 20” // has to be in this format since we use rgba var interval = setInterval(function() { opacity -= 3; if (opacity How can use jQuery to animate a flash to the button? var randomNumber = Math. floor(Math.

What does jQuery animate do?

The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback); The required params parameter defines the CSS properties to be animated.

What is the correct syntax of animate () method?

The jQuery animate() method provides you a way to create custom animations. Syntax: $(selector). animate({params}, speed, callback);

Is jQuery good for animation?

The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects.


1 Answers

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.

like image 197
Alex Avatar answered Sep 24 '22 16:09

Alex