jquery切换效果

Question

我是jquery的新手，我正在尝试制作一个下拉效果，但我想再次单击div，以便它再次滑动:)我如何才能做到这一点？

<script type="text/javascript">
    $(function() {
        $('#panel').click(function() {
            $(this).animate({
                'height' : '500px'
            },1000);
            $('#demo').fadeIn(500);
        });
    });
</script>

<div id="panel">Hej med dig</div>

Answer 1

我认为：

$('#panel').click(
    function(){
        $(this).slideToggle(1000);
        $('#demo').fadeToggle(500);
    });

就是你要找的。

参考文献：

1. slideToggle()，
2. fadeToggle().

​

编辑的

​

考虑到你的加价本质上是：

<div id="panel">Hej med dig
    <div id="demo">Jeg er demo</div>    
</div>

下面的jQuery可能会工作得更好：

$('#panel').click(
    function(){
        $('#demo').slideToggle(500);
    });

JS Fiddle demo。

Answer 2

要完成此操作，您需要将整个幻灯片函数包装在准备好DOM的jQuery函数中，并利用noConflict方法。这将确保在加载整个文档之前，上下幻灯片是不可操作的，并且无冲突将确保它不会与任何其他JS库或您可能已有的自定义脚本冲突。

var $i = jQuery.noConflict();
$i(document).ready(function() {
  $i('#panel').click(function() {
    $i('#demo').slideToggle('slow');
  });
});

请注意，jQuery 1.4.3中的滑动切换函数有一些可以传递的额外参数。

.slideToggle( [ duration ], [ easing ], [ callback ] )
**duration** - string or number determining how long the animation will run.
**easing** - string indicating which easing function to use for the transition.
**callback** - function to call once the animation is complete.

您可以了解有关slideToggle()；函数的更多信息，并在此处查看实际示例：

jQuery .slideToggle();

Answer 3

你可以在我的演示中查看它。我抓取高度面板的初始值，并使用条件来定义我用于动画方法的高度。

    $panel= $('#panel');
    init_height= $panel.css('height'); // grab initial value of height when DOM is ready
    $('#panel').click(function() {
        cur_height= $(this).css('height');
        (cur_height == '500px') ? height= init_height : height= '500px'; // conditional statement to define height for animate method;

        $(this).animate({
            'height' : height
        },1000);
        $('#demo').fadeIn(500);
    });

希望能对你有所帮助