Question

我有一个链接（index.html#services）和一个<div id="services>，我正在尝试更改链接点击后的背景颜色然后淡出。我正在使用最新的jQuery和jQuery Color插件，并且：

$(document).ready(function(){
    if(window.location.hash === '#services') {
        var service = $('#services');
        var originalColor = service.css('background-color');

        service.css('background-color', '#FFEE9F').animate({
            'background-color': originalColor
        }, 3000);
    }
});

进行突出显示，但它不起作用。谁知道为什么？

Answer 1

该代码仅在加载页面时运行，而不是在单击带有哈希的链接时运行。尝试直接从新的浏览器选项卡中链接（index.html#services），它可能会起作用。您需要做的是在更改哈希时运行该代码。新浏览器有一个onhashchange事件 - 但在旧浏览器上没有这样的事情。对于旧浏览器，您可以经常轮询哈希属性以查看它是否已更改。

如果在触发该动画的链接上有一个特定的标识符（css类，id，名称等），您可以添加click侦听器来运行该代码。例如：

function animateBackground() {
    var service = $('#services');
    var originalColor = service.css('background-color');

    service.css('background-color', '#FFEE9F').animate({
        'background-color': originalColor
    }, 3000);
}

$(function () { // shortcut to $(document.ready)
   $('.fade-bg').live('click', animateBackground);
   animateBackground();
});

Answer 2

或使用

window.onhashchange = function(){
    if(window.location.hash === '#services') {
        var service = $('#services');
        var originalColor = service.css('background-color');

        service.css('background-color', '#FFEE9F').animate({
            'background-color': originalColor
        }, 3000);
    }
};

取决于您定位的浏览器。

window.location.hash无法正常工作？

2 个答案: