在新的div淡出，淡入當點擊外DIV

我有網頁使用jQuery，做以下，我將需要幫助的最後一步：在新的div淡出，淡入當點擊外DIV

該頁面包含的div（＃「containerSW」）當按鈕（＃「doit」）被按下時，它來回切換其內容。

'containerSW'的內容是包含圖像的兩個div（'div1'和'div2'）。這些圖像將用作加載全新的div（＃「containerprA」）代替父div'containerSW'（參見'div1'中的第一圖像的輸入）的按鈕。

到目前爲止，所有的工作，除了現在我試圖做一個點擊功能，淡出'containerprA回到'containerSW'，當你點擊'containerprA'之外。我試圖用下面的mouseup函數做到這一點，但不能讓'containerSW'淡入：它在頁面上顯得太快。

我認爲問題出在 'containerSW' 的孩子的div，但我不知道如何解決它..

的HTML：

<input id="doit" type="image" src="Img/array_arrow_rightII.jpg" height=120px width 40px value="clickme"> 


<div id="containerSW"> 
<div id="div1"> 
    <img class="SW"> 
    <input id="loadprA" type="image" src="Img/SW_A.jpg" height=125px width 125px > 
    <img src="Img/SW_B.jpg" height=125px width 125px> 
    <img src="Img/SW_C.jpg" height=125px width 125px> 
    <img src="Img/SW_D.jpg" height=125px width 125px> 
</div> 
<div id="div2"> 
    <img class="SW"> 
    <img src="Img/SW_E.jpg" height=125px width 125px> 
    <img src="Img/SW_F.jpg" height=125px width 125px> 
    <img src="Img/SW_G.jpg" height=125px width 125px> 
    <img src="Img/SW_H.jpg" height=125px width 125px> 
</div> 
</div> 

<div id="containerprA" class="hidden"> 

<img src="Img/SW_divtester.jpg" height=150px width=400 > 

</div>

的CSS：

#div1 { 
} 
#div2 { 
    display: none; 
} 
.hidden { 
    display:none; 
    background-color:red; 
} 
#containerprA { 
    height:400px; 
    width:800px; 
    background-color: blue; 
}

腳本：

$(function() { 
var vis = 1; 
$('#doit').click(function() { 
    $('#containerSW').fadeOut('slow', function() { 
     $('#div'+vis).hide(); 
     vis = vis === 1 ? 2 : 1; 
     $('#div'+vis).show(); 
     $('#containerSW').fadeIn('slow'); 
    }); 
}) 
}); 

$(function(){ 
$('#loadprA').click(function(){ 
    $('#containerprA').hide(); 
    $('#containerSW').fadeOut('slow', function() { 
    $('#containerprA').removeClass('hidden'); 
    $('#containerprA').fadeIn('slow'); 


    }); 
}) 
}); 


$(document).mouseup(function (e) 
{ 
var container = $('#containerprA'); 
var containerSW = $('#containerSW'); 


if (!container.is(e.target) // if the target of the click isn't the container... 
    && container.has(e.target).length === 0); // ... nor a descendant of the container 

if (!containerSW.is(e.target) // if the target of the click isn't the container... 
    && containerSW.has(e.target).length === 0) // ... nor a descendant of the container 

{ 
    container.fadeOut('slow'); 
    containerSW.fadeIn('slow'); 
} 

});

關於這最後一步的任何幫助將非常棒。

來源

2013-08-16 Laura Maasry

使用回調。這將確保僅當淡出結束時纔開始淡入淡出。

container.fadeOut('slow',function(){ 
containerSW.fadeIn('slow'); 
});

來源

2013-08-16 10:11:20 raam86

您可以使用整個頁面爲目標，並檢查它是否是「不」的containerprA ..

$('body,html').on('click', function(e) { 

    if(!$(e.target).is($('#containerprA, #containerprA *'))){ 
    // your logic here 
    } 

});

這基本上說，如果我們點擊任何不#containerprA然後做一點事。 http://jsfiddle.net/simeydotme/X49Ku/

來源

2013-08-16 10:31:13

在新的div淡出，淡入當點擊外DIV

回答

相關問題