Javascript jQuery .toggle() 模态显示/隐藏对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5333637/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .toggle() Modal show/hide dialog box
提问by Brian
I've browsed some similar questions - but I've been looking forever and no luck finding an implementation that's the same as what I'm looking to do.
我浏览了一些类似的问题 - 但我一直在寻找，但没有找到与我想要做的相同的实现。
It's VERY simple:
这很简单：
<a class="contacttoggle" href="#">Contact</a>
<div>Lots of content between</div>
<div>Lots of content between</div>
<div>Lots of content between</div>
<div>Lots of content between</div>
<div class="contact_box">Contact info that is initially hidden and then fades in when the "contact_toggle" Contact link above is clicked</div>
I'm looking for this to fade in and it will be absolutely positioned on the page (no worries I can handle the CSS). I just DO NOTwant a slide effect. Just fade in.
我正在寻找这个淡入淡出，它将绝对定位在页面上（不用担心我可以处理 CSS）。我只是不想要幻灯片效果。只是淡入。
I feel like this code should work but it's not :(
我觉得这段代码应该可以工作，但不是:(
$(document).ready(function(){
/* function to show and hide main navigation conatct box */
$(".contact_box").hide();
$('a.contacttoggle').click(function() {
$(this).next("div").find(".contact_box").toggle(400);
return false;
});
})
回答by Haochi
What about fadeToggle?
淡入淡出怎么样？
回答by Marcel
Rather then toggle(), just animate()opacity with 'toggle'.
相反toggle()，只是animate()不透明度与 'toggle'。
$(".contact_box").animate({opacity:'toggle'}, 400);
回答by iivel
How about blockUI? It's one of those Plugins I really overuse.
blockUI 怎么样？这是我真正过度使用的插件之一。
Go to this link for more information: http://jquery.malsup.com/block/
转到此链接了解更多信息：http: //jquery.malsup.com/block/
回答by jon_darkstar
Instead of
代替
$(this).next("div").find(".contact_box").toggle(400);
Try
尝试
$("div.contact_box").toggle(400);
