Jquery 淡出,在单击外部div时淡入新div
我有一个使用jQuery的页面,可以执行以下操作,最后一步我需要帮助: 该页面包含div(#“containerSW”),按下按钮(#“doit”)时,该div可来回切换其内容 “containerSW”的内容是包含图像的两个div(“div1”和“div2”)。这些图像将作为按钮来加载一个全新的div(#“containerprA”)以代替父div“containerSW”(请参见“div1”中第一个图像的输入) 到目前为止,一切都正常,除了现在我正在尝试创建一个单击功能,当您在“containerprA”之外单击时,该功能将淡出“containerprA”返回到“containerSW”。我曾尝试使用下面的mouseup函数来实现这一点,但无法使“containerSW”淡入:它在页面上显示得太快了 我认为问题在于“集装箱工人”的儿童部门,但我不知道如何解决它 html:Jquery 淡出,在单击外部div时淡入新div,jquery,html,fadein,children,Jquery,Html,Fadein,Children,我有一个使用jQuery的页面,可以执行以下操作,最后一步我需要帮助: 该页面包含div(#“containerSW”),按下按钮(#“doit”)时,该div可来回切换其内容 “containerSW”的内容是包含图像的两个div(“div1”和“div2”)。这些图像将作为按钮来加载一个全新的div(#“containerprA”)以代替父div“containerSW”(请参见“div1”中第一个图像的输入) 到目前为止,一切都正常,除了现在我正在尝试创建一个单击功能,当您在“contai
<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>
剧本:
$(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');
}
});
关于这最后一步的任何帮助都会非常好 使用回调函数。这将确保淡入仅在淡入结束时开始
container.fadeOut('slow',function(){
containerSW.fadeIn('slow');
});
您可以将整个页面用作目标,并检查它是否“不是”
containerprA
$('body,html').on('click', function(e) {
if( !$(e.target).is( $('#containerprA, #containerprA *') ) ){
// your logic here
}
});
基本上这是说,如果我们点击了任何不是#containerprA的东西,然后做点什么。
$('body,html').on('click', function(e) {
if( !$(e.target).is( $('#containerprA, #containerprA *') ) ){
// your logic here
}
});