Question

I’ve got a button on the top of my page that scrolls to a DIV when I click it, but I also want it to make that h3 flash to one colour and then back to original when it has scrolled to it like Facebook does for notifications.

JQuery so far:

        function goToByScroll(id) {
        $('html,body').animate({ scrollTop: $("#" + id).offset().top }, 'slow');
        $("#" + id).css({ "color": "yellow" }).delay(1000).css({ "color": "#222" });
    }

HTML so far:

<a href="javascript:void(0)" onclick="goToByScroll('createdest')">Add Destination</a>

<h3 id="createdest">Add a Country</h3>

But so far nothing is changing. What can I try next?

Answer 1

Use the animate() function’s callback to run the code right after the animation completes.

Also, I added data attributes to store the original color of the element:

var $target = $("#" + id);
$target.data('oldColor', $target.css("color"));
$target.css("color", "yellow");

$('html,body').animate({ scrollTop: $("#" + id).offset().top }, 'slow', function() {
  $target.delay(1000).css('color', $target.data('oldColor'))
});