jQuery的切换动画 [英] jQuery toggle animation

问题描述

我有这个jQuery的：

  $（文件）。就绪（函数（）
{
   $（＃面板），隐藏（）。   $（'登录'）。切换（
   功能（）
   {
      $（'＃面板）。动画（{
      高度：150，
      填充：20像素0
      的backgroundColor：'＃000000'，
      不透明度：0.8
}，500）;
   }，
   功能（）
   {
      $（'＃面板）。动画（{
      高度：0，
      填充：0像素0
      不透明度：0.2
      }，500）;
   }）;
}）;
 

这是工作正常，但我需要扩展功能一点。我想也同样与#panel DIV同步操纵另一个div的属性。我尝试添加两个涉及到二级分区功能，但我只是得到了4相切换...哈哈！
原谅我的无知！

谢谢你们！

解决方案

  $（'登录'）。切换（
    功能（）{
        $（'＃面板）。动画（{
            高度：150，
            填充：20像素0
            的backgroundColor：'＃000000'，
            不透明度：0.8
        }，500）;
        $（'＃otherdiv'）。动画（{
            //此处otherdiv性能
        }，500）;
    }，
    功能（）{
        $（'＃面板）。动画（{
            高度：0，
            填充：0像素0
            不透明度：0.2
        }，500）;
        $（'＃otherdiv'）。动画（{
            //此处otherdiv性能
        }，500）;
}）;
 

I have this 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);
   });
});

This is working fine, but I need to extend the functionality a little. I want to also similarly manipulate another div's properties in sync with the #panel div. I tried adding two more functions relating to the secondary div, but I just got a 4-phase toggle...haha! Forgive my ignorance!

Thanks guys!

解决方案

$('.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的切换动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！