jquery - 如何使用jQuery同时具有淡入淡出效果和动画

Question

我想用#menu id制作一个菜单，并同时获得像淡入淡出和移动动画这样的2效果。我白了这段代码，但第一次运行淡入淡出和第二次运行动画。我想同时运行拖曳效果。

        <div id="Menu" style="right=0px;width=100px;height=200px;display=none;background=black;"></div>

    <script>
  $(document).ready( function (){
         $(function () {
                $("#menu").fadeIn("1000");
                $("#menu").animate({
                right: '50px'
                }, { duration: 2000, queue: false });

        });
});
    </script>

Answer 1

请检查以下代码

<div id="menu"></div>

<a href="#" id="animate">Animate</a>

#menu{
    height:20px;
    width:400px;
    background-color:#ccc;
    display:none;
    position:absolute;
}

 $(function () {
     $("#animate").click(function(){
         $("#menu").fadeIn("1000",function(){
             $("#menu").animate( 
                 {
                 //opacity: 0.25,
                 left: '+=100px'

               }, 1000, function() {
                // Animation complete.
          });
         });
     });
});

这是演示链接：http: //jsfiddle.net/shadow2burn/z5LsY/

Answer 2

您可以同时使用 CSS opacity 和动画这两个属性

$("#menu").animate({opacity: 1, left: '+=100px'}, 2000);

演示小提琴