jQuery切换动画答案

【问题标题】：jQuery toggle animationjQuery切换动画
【发布时间】：2010-10-30 04:31:24
【问题描述】：

我有这个 jQuery：

$(document).ready(function()
{
   $("#panel").hide();

   $('.login').toggle(
   function()
   {
      $('#panel').animate({
      height: "150", 
      padding:"20px 0",
      backgroundColor:'#000000',
      opacity:.8
}, 500);
   },
   function()
   {
      $('#panel').animate({
      height: "0", 
      padding:"0px 0",
      opacity:.2
      }, 500);
   });
});

这工作正常，但我需要稍微扩展一下功能。我还想类似地操作与#panel div 同步的另一个div 的属性。我尝试添加另外两个与辅助 div 相关的功能，但我只是得到了一个 4 相切换……哈哈！原谅我的无知！

谢谢大家！

【问题讨论】：

为什么不能在前两个函数中添加代码来操作第二个 DIV？我错过了什么吗？
不，我错过了！我是一个 jscript 菜鸟。

标签： jquery animation toggle

【解决方案1】：

使用 jquery 中的 toggle() 或 slideToggle：

Toggle

  $( "#clickme" ).click(function() {
      $( "#book" ).slideToggle( "slow", function() {
        // Animation complete.
      });
    });


 <div id="clickme">
      Click here
    </div>
    <img id="book" src="book.png" alt="" width="100" height="123">

【讨论】：

【解决方案2】：

我不认为在切换功能中添加双重功能适用于注册的点击事件（除非我遗漏了什么）

例如：

$('.btnName').click(function() {
 top.$('#panel').toggle(function() {
   $(this).animate({ 
     // style change
   }, 500);
   },
   function() {
   $(this).animate({ 
     // style change back
   }, 500);
 });

【讨论】：

那么，你想说什么？我不认为提供可以正常工作的代码并说“哦，它可以正常工作”是没有帮助的。发布一个真正的解决方案。
我认为提供可以正常工作的代码并说“哦，它可以正常工作”会很有帮助。
这个函数在 JQuery 1.8 中被弃用并且在 JQuery 1.9 中被移除。 api.jquery.com/toggle-event/#entry-longdesc

【解决方案3】：

$('.login').toggle(
    function(){
        $('#panel').animate({
            height: "150", 
            padding:"20px 0",
            backgroundColor:'#000000',
            opacity:.8
        }, 500);
        $('#otherdiv').animate({
            //otherdiv properties here
        }, 500);
    },
    function(){
        $('#panel').animate({
            height: "0", 
            padding:"0px 0",
            opacity:.2
        }, 500);     
        $('#otherdiv').animate({
            //otherdiv properties here
        }, 500);
});

【讨论】：

该函数在 JQuery 1.8 中被弃用，并在 JQuery 1.9 中被移除。 api.jquery.com/toggle-event/#entry-longdesc

【解决方案4】：

onmouseover="$('.play-detail').stop().animate({'height': '84px'},'300');" 

onmouseout="$('.play-detail').stop().animate({'height': '44px'},'300');"

只需设置两个停止点——一个 onmouseover 和一个 onmouseout。

【讨论】：

使用内联 JavaScript 不是一个好的模式。如果您已经在使用 jQuery，请改用事件处理程序。