jQuery .toggle() Modal show/hide dialog box

Question

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 NOT want a slide effect. Just fade in.

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


})

Answer 1

fadeToggle怎么样？

Answer 2

而不是toggle() ，只是使用'toggle' animate()不透明度 。

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

Answer 3

How about blockUI? It's one of those Plugins I really overuse.

Go to this link for more information: http://jquery.malsup.com/block/

Answer 4

Instead of

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

Try

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