I'm currently attempting to implement a basic pulse effect by utilizing JQuery to modify the background color. However, I am facing issues with animating the backgroundColor property.
function show_user(dnid) {
/* dnid represents the HTML ID of a specific div element. */
if (! $(dnid).is(':visible')) {
$(dnid).show()
}
$('html, body').animate({scrollTop: $(dnid).offset().top});
$(dnid).animate({backgroundColor: "#db1a35"}, 1200);
}
A curious observation is that an alternate animation like this one does work:
$(dnid).animate({opacity: "toggle"}, 1200);
However, it's not the desired effect I am seeking.
In addition, the functionality for show() and scrolling within the function work perfectly fine. The only issue lies with the background color animation.
The function mentioned above is triggered by clicking on this link
<a href="#" onclick="javascript:show_user('#9e4cde88b90004ea722e9e129ed83747')">Locate Me</a>Is there anyone who can assist me in achieving the animated background color?
=========
Thank you to everyone for your assistance. While many responses were similar, here is the solution that worked for me
In my header section
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>Then directly after the scroll animation in my show_user function.
var bgcolor = $(dnid).css('backgroundColor');
$(dnid).animate({backgroundColor: "#db1a35"}, 2000);
$(dnid).animate({backgroundColor: bgcolor}, 2000);
This results in a quick red "pulse" effect, effectively capturing the user's attention.
Once again, thank you for all the support.