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


})

Answer 1

fadeToggle怎么办？

Answer 2

而不是toggle()，而只是animate() opacity with 'toggle'。

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

Answer 3

blockUI怎么样？这是我真正过度使用的插件之一。

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

Answer 4

而不是

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

尝试

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

jQuery .toggle（）模态显示/隐藏对话框

4 个答案: