исчезать, исчезать в новом DIV, когда мыши вне DIV

Question

У меня есть страница с JQuery, что делает следующее, и мне нужна помощь с последним шагом:

страница содержит DIV (# «containerSW»), который переключает свое содержимое вперед и назад при нажатии кнопки (# «doit»).

Содержимое «containerSW» представляет собой два div ('div1' и 'div2'), которые содержат изображения. Эти изображения будут функционировать как кнопки, которые загружают совершенно новый div (# "containerprA") вместо родительского div 'containerSW' (см. Ввод первого изображения в 'div1').

До сих пор все работает, за исключением того, что теперь я пытаюсь сделать функцию щелчка, которая исчезает из-за «контейнераprA», чтобы вернуться к «containerSW», когда вы нажимаете вне «containerprA». Я попытался сделать это с помощью функции mouseup ниже, но не могу заставить «containerSW» исчезать: он слишком быстро отображается на странице.

Я думаю, что проблема заключается в детских дивы в 'containerSW', но я не знаю, как решить эту проблему ..

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/