jquery切换效果

我是新来jquery，我试图做一个下拉效果，但我想再次点击该div，所以它再次滑动:)我该怎么做？jquery切换效果

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

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

来源

2011-03-02 ole

你想使给定的点击DIV向上滑动，是正确的？ – 2011-03-02 23:46:46

请问：您的（x）html标记是什么？这似乎是一个奇怪的UI决定（虽然这是基于我的答案使用各种切换）。 – 2011-03-02 23:49:27

http://tinyurl.com/666kwth这里是我的，我想再次点击它，所以它再次滑动 – ole 2011-03-03 00:01:19

我想：

$('#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。

来源

2011-03-02 23:46:32

这是一个很好的例子，但我可能会推荐一个document.ready和没有冲突的方法利用，我我会举一个例子。 – 2011-03-03 00:01:12

那不是我在想什么：/这就是我的@大卫http://tinyurl.com/666kwth – ole 2011-03-03 00:08:25

谢谢@尼基塔......你疯狂的爱人，你......！ = b @ole，新版本怎么样？如果没有链接（你随后提供），我无法完成你所需要的东西:) – 2011-03-03 00:12:52

要通过你将要包装整个幻灯片功能的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();

来源

2011-03-02 23:59:08

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

$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

来源

2011-03-03 02:14:12

jquery切换效果

回答

相关问题