jquery - 滑动 DIV 的快速 JQuery 问题

Question

我需要我的滑动 DIV 在页面加载时自动关闭，此时它显示为展开状态，并且我想减慢动画速度……目前它的速度非常快，即使我将其设置为低。代码如下：

查询：

$(document).ready(function(){

        $(".slidingDiv").hide('slow');
        $(".show_hide").show('slow');

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

 $(".slidingDiv").hide('slow');
});

HTML：

 <a href="#form" class="show_hide">Show/hide</a>
<a name="form" id="form"></a>
<div class="slidingDiv">

CONTENT BLAH BLAH

</div>

Answer 1

尝试这个：

setTimeout(function() {
    $(".slidingDiv").hide('slow');
}, 2000);

演示：http: //jsfiddle.net/BWqjp/

Answer 2

首先使div按样式隐藏，或者至少从div.hide调用中删除slow参数。

关于速度，您可以传递任意数字作为参数.slideToggle()来确定幻灯片效果的持续时间（以毫秒为单位）。

$(document).ready(function() {

    $(".slidingDiv").hide();
    $(".show_hide").show('slow');

    $('.show_hide').click(function() {
        $(".slidingDiv").slideToggle(2000);
    });

});​

请参阅此演示。

Answer 3

您是否尝试过使用淡入淡出和淡入淡出？

$(document).ready(function(){
    $(".show_hide").hide();
    $(".slidingDiv").fadeOut('slow', function() {
         $(".show_hide").fadeIn('slow');            
    });
    $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
    });
});​

这是小提琴：http: //jsfiddle.net/zEnZx/

Answer 4

$().ready(function(){
    $(".slidingDiv").hide()
    $('.show_hide').click(function(){
      $(".slidingDiv").slideToggle();
    })
});