Question

我想用#menu id创建一个菜单，并获得像fadein这样的2效果并同时移动动画。我白了这个代码，但第一次运行fadein和seccound运行动画。我想同时运行拖动效果。

        <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不透明度并同时为两个属性设置动画

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

<强> Demo fiddle

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

2 个答案: