单击链接时，如何使文本框发光然后淡出？

Question

我正在尝试在页面底部创建一个更明显的文本框 - 我将如何创建一个链接，当点击该链接时，将浏览器移动到页面底部，然后使文本框围绕然后边缘变淡（如在发光脉冲中，我不希望文本框褪色！）？

Answer 1

我有一个粗略的实现。它使用突然的锚标签单击将您移动到文本框，但是，您可以使用jQuery的animate函数使其漂亮。它确实会产生您想要的脉冲效果。

http://jsfiddle.net/pBg6U/

$(function() {
    $("#glow-trigger").on('click', function(e) {
        var glower = $('.glow');
        window.setInterval(function() {  
            glower.toggleClass('active');
        }, 1000);
    });
});

Answer 2

您可以使用以下功能滚动到元素。只需将id或类赋予要滚动的函数：

function scrollto(element) {
    $('html, body').animate({scrollTop: ($(element).offset().top)}, 'slow');
}

对于发光效果，您可以使用JQuery高亮显示功能。

$(element).show("highlight");