Question

我有jQuery的页面执行以下操作，我将需要最后一步的帮助：

页面包含div（＃“containerSW”），当按下按钮（＃“doit”）时，它会来回切换内容。

'containerSW'的内容是包含图像的两个div（'div1'和'div2'）。这些图像将作为按钮，在父div“containerSW”的位置加载一个全新的div（＃“containerprA”）（参见'div1'中第一个图像的输入）。

到目前为止一切正常，除非现在我正在尝试制作一个点击功能，当你点击'containerprA'之外时，淡出'containerprA回到'containerSW'。我尝试使用下面的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');
}

});

关于这最后一步的任何帮助都会非常棒。

Answer 1

使用回调。这将确保淡入效果仅在淡出结束时开始。

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

Answer 2

您可以将整个页面用作目标，并检查它是否“{”containerprA ..

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

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

});

基本上，这表示如果我们点击任何不是#containerprA的东西，那么就做点什么。 http://jsfiddle.net/simeydotme/X49Ku/

淡出，在div外点击时淡入新div

2 个答案: