jquery - 更改 H3 颜色 onClick 然后 Fade Back

Question

我的页面顶部有一个按钮，当我单击它时会滚动到 DIV，但我也希望它使 h3 闪烁为一种颜色，然后在滚动到它时返回原始颜色，就像 Facebook 所做的那样通知。

到目前为止的jQuery：

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

到目前为止的HTML：

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

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

但到目前为止，一切都没有改变。接下来我可以尝试什么？

Answer 1

使用animate()函数的回调在动画完成后立即运行代码。

另外，我添加了data属性来存储元素的原始颜色：

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'))
});

Answer 2

尝试queue()方法：

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