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

是您正在寻找的。

参考文献：

slideToggle()，
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 ready 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);
    });

希望对你有帮助

DEMO

jquery切换效果

3 个答案: