元素「閃爍」，並移到淡出/淡入

我用下面的代碼fadeOut和fadeIn內容的div一個頁面（jsfiddle here）上...元素「閃爍」，並移到淡出/淡入

HTML：

<ul> 
    <li><a id="indexNav" href="index.html">Home</a></li> 
    <li><a id="aboutNav" href="about.html">About</a></li> 
</ul> 

<div id="indexContent"> 
    This is the main page content. 
</div> 

<div id="aboutContent"> 
    This is the about page content. 
</div>

CSS：

ul { 
    float: left; 
    display: block; 
    margin-top: 50px; 
    margin-left: 0px; 
} 

ul li { 
    list-style: none; 
    display: block; 
    margin-top: 5px; 
} 

ul li a { 
    display: block; 
    height: 20px; 
    width: 50px; 
    margin: 0px; 
    background: #7d5900; 
    color: white; 
    text-decoration: none; 
    text-align: center; 
} 

div { 
    width: 300px; 
    height: 200px; 
    margin: auto; 
    margin-top: 70px; 
    color: white; 
    background-color: rgba(0, 36, 125, 0.5); 
} 

#aboutContent { 
    display: none; 
}

的JavaScript：

$('#indexNav').click(function() { 
    $('#aboutContent').fadeOut('fast'); 
    $('#indexContent').fadeIn('fast'); 
    return false; 
}); 

$('#aboutNav').click(function() { 
    $('#indexContent').fadeOut('fast'); 
    $('#aboutContent').fadeIn('fast'); 
    return false; 
});

如the jsfiddle（至少在Windows 7上的Firefox 9.0.1和IE 9中）所示，當在鏈接之間點擊以顯示/隱藏相關元素時，會出現頁面寬度閃爍作爲元素的動畫。基本上，div在頁面的下方移動很遠，這會導致滾動條出現，並將div稍微向左推，然後在動畫結束時恢復正常。我沒有任何手段在CSS方面很專業，我只是有點修補這個嘗試實現簡單的淡出/淡入效果（自然使用jQuery）。所以我想知道是否有更正確的方法來做到這一點，或者如果我在我的設計中犯了某種根本性的錯誤，那只是我不知道的。

關於什麼可能會導致這種閃爍以及如何糾正它的任何想法？

來源

2012-01-24 David

爲什麼你還要在HREF中的網頁鏈接，如果你的網頁上加載其他隱藏的div？ ...只是想知道 – hanzolo

@hanzolo：哦，我忘記刪除這些例子。它們已經到位，因爲我有計劃在JavaScript未啓用的情況下對網站進行更優雅的降級。但是他們與這個問題的背景無關。 – David

$('#indexNav').click(function() { 
    $('#aboutContent').fadeOut('fast',function(){ 
     $('#indexContent').fadeIn('fast'); 
    }); 
    return false; 
}); 

$('#aboutNav').click(function() { 
    $('#indexContent').fadeOut('fast',function(){ 
     $('#aboutContent').fadeIn('fast'); 
    }); 
    return false; 
});

來源

2012-01-24 17:58:36 Ethan

啊，我明白了。我需要使用回調來等待動畫正確完成。謝謝！ – David

發生這種情況是因爲您的元素相對顯示。這意味着，當兩者都出現在屏幕上時，他們會相互移動。當你進行交叉淡入淡出時，這基本上就是你在做什麼，他們都會在屏幕上一段時間。你需要絕對定位元素佔據相同的空間。

#aboutContent, #indexContent { 
    position: absolute; 
    top: 10px; 
    left: 50px; 
}

例子：http://jsfiddle.net/2TDj5/

你可以把一個包裝的div元素，這將允許您將它們相對於頁面，但是絕對相對於彼此定位。只要確保你明確地將包裝設置爲display: relative。

例子：http://jsfiddle.net/2TDj5/1/

來源

2012-01-24 18:05:39

有趣。我承認，我一直反對使用絕對定位多年，但對於這個簡單的小網站，它可能會讓我的生活變得更輕鬆。 – David

絕對定位沒有錯。但是你需要正確使用它。在很多情況下，相對於身體絕對地定位元素在不同的屏幕上不是很健壯。（比如我的簡單例子）。但是，正如我在我的答案的其餘部分所述，只要你在包裝中的絕對位置，它不會限制你的頁面的靈活性。 –

事實上，關鍵一直是「正確使用它」（我在這種情況下顯然甚至沒有使用淡入淡出功能）。而且我沒有很多UI開發經驗，所以像你這樣有用的提示對我來說正確使用工具有很大的幫助。謝謝！ – David

我認爲一個簡單的

.delay(1).fadeIn(...)

應該幫助

來源

2014-02-18 16:17:38 tom

元素 「閃爍」，並移到淡出/淡入

回答

相關問題

元素「閃爍」，並移到淡出/淡入