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 :)
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.
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.
The jQuery animate() method provides you a way to create custom animations. Syntax: $(selector). animate({params}, speed, callback);
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With