jQuery沒有立即生效

是否有任何理由讓我的jQuery效果不會立即生效？我有jQuery懸停淡入淡出效果，但後來我也有CSS翻轉作爲備份的JavaScript禁用的任何人。發生什麼事情是當你加載一個頁面並滾動一個鏈接時，你會得到CSS效果，但隨後的任何時候，你都會得到很好的，流暢的jQuery效果。每一個環節都必須重複。有沒有解決這個問題？jQuery沒有立即生效

我jQuery代碼是這樣的：

$(document).ready(function() { 

$(".nav-link").hover(function() { 
$(this).animate({ color: "#669900" }, 250); 
return false; 
}, 
function() { 
$(this).animate({ color: "#999999" }, 250); 
}); 

$(".twit-link").hover(function() { 
    $(this).animate({ color: "#0099CC" }, 250); 
    return false; 
}, 
function() { 
$(this).animate({ color: "#999999" }, 250); 
}); 

$(".rss-link").hover(function() { 
$(this).animate({ color: "#CC6600" }, 250); 
    return false; 
}, 
function() { 
    $(this).animate({ color: "#999999" }, 250); 
}); 

$(".sidebar-item").hover(function() { 
    $(this).animate({ color: "#669900"}, 250); 
    return false; 
}, 
function() { 
    $(this).animate({ color: "#333333"}, 250); 
}); 

$(".archive-link").hover(function() { 
    $(this).animate({ color: "#666666"}, 250); 
    return false; 
}, 
function() { 
    $(this).animate({ color: "#999999"}, 250); 
}); 

$(".sub").hover(function() { 
    $(this).animate({ 'background-color': '#336600'}, 250); 
    return false; 
}, 
function() { 
    $(this).animate({ 'background-color': '#669900'}, 250); 
}); 

$(".post-sb").hover(function() { 
    $(this).animate({ 'opacity': 1.0, 
    'filter': 'alpha(opacity = 100)'}, 250); 
    return false; 
}, 
function() { 
    $(this).animate({ 'opacity': .25, 
    'filter': 'alpha(opacity = 25)'}, 250); 
}); 

});

我從谷歌（http://code.jquery.com/jquery-latest.pack.js）

讓我的jQuery直我使用Safari。現在，我正在用MAMP測試我的網站，所以它在我的計算機上的本地，但最終它會去到外部服務器。

來源

2010-03-08 williamg

你可以發佈你的jQuery代碼嗎？這會有很大的幫助。 – 2010-03-08 22:36:09

你能說你正在使用哪個瀏覽器，以及你從哪裏爲jQuery提供服務？在某些瀏覽器中，您可以看到與HTML文件關聯的資源下載需要多長時間。（Chrome中的Ctrl + Shift + J） – 2010-03-08 22:36:40

這是生活/在外部服務器還是在您自己的計算機上？ – 2010-03-08 22:44:08

因爲你的CSS有一個直接的懸停效果，它只是在jQuery之前，並且在你的懸停事件有機會進入之前改變了樣式。我會禁用這些樣式，或者在jQuery加載時更改元素的樣式， CSS :hover選擇器不再有效。

在HTML你可以有例如：

<a class="nav-link njs">My Link</a>

在你的CSS：

.nav-link { color: #999999 } 
.njs.nav-link:hover { color: #669900; }

在你的jQuery：

$(".njs").removeClass("njs"); //Disable the hovers

另外，我建議的功能這裏簡化看看代碼：

$(function() { 
    $(".njs").removeClass("njs"); 
    setColors(".nav-link", "#669900", "#999999"); 
    setColors(".twit-link", "#0099CC", "#999999"); 
    setColors(".rss-link", "#CC6600", "#999999"); 
    setColors(".sidebar-item", "#669900", "#333333"); 
    setColors(".archive-link", "#666666", "#999999"); 
    setColors(".twit-link", "#0099CC", "#999999"); 

    $(".sub").hover(function() { 
    $(this).animate({ 'background-color': '#336600'}, 250); 
    }, function() { 
    $(this).animate({ 'background-color': '#669900'}, 250); 
    }); 

    $(".post-sb").hover(function() { 
    $(this).fadeIn(250); 
    }, function() { 
    $(this).fadeTo(250, 0.25); 
    }); 

}); 

function setColors(selector, hColor, nColor) { 
$(selector).hover(function() { 
    $(this).animate({ color: hColor}, 250); 
    }, function() { 
    $(this).animate({ color: nColor}, 250); 
    }); 
}

來源

2010-03-08 22:54:24

這可能不是最好的解決方案，但在設置效果之前嘗試用JavaScript否定CSS。您可以添加類似anotherClass:hover的CSS和懸停效果，然後使用JavaScript刪除類。

來源

2010-03-08 22:40:19 Jeremy

嘗試在本地使用jQuery文件。即使谷歌也無法與自己的電腦提供的服務競爭，並且在網上看到的延遲並不是不可能反映出來。

來源

2010-03-08 22:53:05

謝謝，我試過了，但我仍然得到相同的效果。 – williamg 2010-03-08 22:54:00

jQuery沒有立即生效

回答

相關問題