jQuery .toggle() 模态框显示/隐藏对话框

Question

我浏览了一些类似的问题 - 但是我一直在寻找一个与我想要做的相同的实现，可惜一直没有找到。

这非常简单：

<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>

我希望这个元素能够淡入，并且在页面上绝对定位（不用担心，CSS我可以处理）。我绝对不想有滑动效果，只需要淡入即可。

我感觉这段代码应该可以工作，但是它没有 :(

$(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;
    }); 


})

- Brian

---

$(".contact").hide(); 应该改为 $(".contact_box").hide();，对吧？“不起作用”是什么意思？点击没有反应吗？ - jon_darkstar

你说得对 - 在我正在处理的代码中是正确的 - 只是编辑了问题...哎呀！但是，仍然无法正常工作。 - Brian

“不起作用”是什么意思？点击时没有任何反应吗？ - jon_darkstar

Answer 1

那么 fadeToggle 呢？

- HChen

---

但那只会单向显示，他想要它可以切换。 - jon_darkstar

@jon_darkstar 嗯，如果他四处看看，就不难找到fadeToggle了。 - HChen

好的，没问题。BAM！找到了，虽然@jon_darkstar是对的，但我不确定我能找到它，已经找了一段时间了 :) - Brian

Answer 2

那blockUI怎么样？它是我经常过度使用的插件之一。

请访问此链接以获取更多信息： http://jquery.malsup.com/block/

- iivel

Answer 3

与其使用toggle()，不如只用animate()来调节透明度。

$(".contact_box").animate({opacity:'toggle'}, 400);

- Marcel

Answer 4

不要使用

$(this).next("div").find(".contact_box").toggle(400);

尝试

$("div.contact_box").toggle(400);

- jon_darkstar

---

我是否漏掉了什么？第一种方式似乎过于复杂，但我感觉它有其存在的理由。 - jon_darkstar