0

我有一个带有 jQ​​uery 的页面，它执行以下操作，我需要最后一步的帮助：

该页面包含 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');
}

});

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

4

2 回答 2

0

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

container.fadeOut('slow',function(){
containerSW.fadeIn('slow');
});
于 2013-08-16T10:11:20.173 回答
0

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

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

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

});

基本上，这表示如果我们点击任何不是#containerprA 的东西然后做一些事情。 http://jsfiddle.net/simeydotme/X49Ku/

于 2013-08-16T10:31:13.993 回答