jQuery Fadin淡出多個DIV
[英]jQuery Fadin in Fade Out for Multiple DIVs
問題描述
我需要淡出圖像滑塊，以便在懸停時顯示許多新內容塊之一。 不幸的是，我在顯示新內容之前無法淡出完成。 誰能看到我在做什么錯？
<div class="slider-wrapper slider">
<!-- Slider Items -->
<ul class="items">
<!-- Slider One -->
<li>
<div class="banner">
TEST1
</div>
</li><!-- Slider Two -->
<li>
<div class="banner">
TEST2
</div>
</li><!-- Slider Three -->
<li>
<div class="banner">
TEST3
</div>
</li>
</ul><!-- /Slider Items -->
</div>
<div id="attract-container">
<div class="attract-copy" id="attract-slider">
ATTTRACT CONTENT
</div>
</div>
<div id="engage-container">
<div class="attract-copy" id="attract-slider">
ENGAGE CONTENT
</div>
</div>
jQuery的：
$(document).ready(function() {
$(".list-services a.tooltips").easyTooltip();
$("#attract").hover(function() {
$(".slider-wrapper").fadeOut(2000, function() {
$("#attract-container").fadeIn(3000, function() {
$(".slider-wrapper").hide();
});
});
$("#attract-container").fadeOut(2000, function() {
$(".slider-wrapper").fadeIn(3000, function() {});
});
});
});
3 個解決方案
解決方案1
1 已采納 2012-03-16 20:28:43
因此，從您提供的所有信息中，我只能得出結論，就是您在某種程度上試圖使事情變得過於復雜。
只是出於演示目的，由於您仍然想知道些什么，因此我做出了這樣的說明來表明我想達到的效果：
http://jsfiddle.net/sg3s/Fdcw8/
有關此示例的一些注意事項：
- 我冒昧地對html進行了一些修改，但我堅持使用您的html外觀，但是我更改了id名稱，並忽略了無關緊要的內容，您需要將多余/特殊的幻燈片移動到包含需要激活它們的鏈接的容器中。
- 我使用了較小的尺寸，而最終設計中沒有詳細的細節，只顯示了為此所需的相關html，css和腳本。
- 我使用了一個簡單的滑塊來制作幻燈片，但是實際使用的插件是無關緊要的。 其用於顯示目的。
讓我知道這是否是理想的效果，我將概述使您的html可以使用所需的步驟。
注意： 我看到您使用的列表在語義上可能更正確； 我的示例也可以根據需要使用列表，但是它的工作量稍大一些。
解決方案2
0 2012-03-16 19:29:32
您的代碼同時淡出和內容淡入。 我不確定這是否是您要的。 我簡化了代碼，以淡出.slider-wrapper並淡入＃attract-container。
$(document).ready(function()
{
$("#attract").hover(function()
{
$(".slider-wrapper").fadeOut('fast', function ()
{
$("#attract-container").fadeIn('fast');
});
});
});
解決方案3
0 2012-03-16 19:37:47
旋轉一下。 要實現mouseout，您需要提供第二個懸停功能。 您還希望確保停止當前動畫，以防它已經在進行相反的淡入淡出：
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.7");
google.setOnLoadCallback(function ()
{
$(document).ready(function () {
$("#attract").hover(
function () {
$(".slider-wrapper").stop().show().fadeOut(2000, function () {
$(".slider-wrapper").hide();
$("#attract-container").stop().fadeIn(3000);
})
},
function () {
$("#attract-container").stop().show().fadeOut(2000, function () {
$("#attract-container").hide();
$(".slider-wrapper").stop().fadeIn(3000);
});
}
);
});
});
</script>
</head>
<body>
<a href="#" id="attract">Hello World</a>
<div class="slider-wrapper">
<div class="slider">
<!-- Slider Items -->
<ul class="items">
<!-- Slider One -->
<li>
<div class="banner">
TEST1
</div>
</li>
<!-- Slider Two -->
<li>
<div class="banner">
TEST2
</div>
</li>
<!-- Slider Three -->
<li>
<div class="banner">
TEST3
</div>
</li>
</ul>
<!-- /Slider Items -->
</div>
</div>
<div id="attract-container" style="display:none">
<div id="attract-slider">
<div class="attract-copy">ATTTRACT CONTENT</div>
</div>
</div>
<div id="engage-container">
<div id="attract-slider">
<div class="attract-copy">ENGAGE CONTENT</div>
</div>
</div>
</body>
</html>
您可能可以刪除style="display:none" 。 我想您已經將它作為樣式表的一部分。 我也正在使用Google的JQuery，因此可能需要刪除/調整。
jQuery淡入淡出div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.