j查询同步动画不起作用

我有一个包含两个div元素的HTML页面。一个是红色的，另一个是蓝色的。红色的在左上角，蓝色的在右上角。我有一个"单击我"链接，单击该链接时应具有动画效果。两个框都应该向下移动。它没有发生。有人可以告诉我为什么吗？

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>Test</title>
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        #box{
            background:red;
            width: 300px;
            height: 300px;
            float: left;
            position: relative;
        }
        #box1{
            background: blue;
            width: 300px;
            height:300px;
            float: right;
            position: relative;
        }
        a{
            position:absolute;
            top: 310px;
            left: 550px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $('a').click(function(){
                $('#box').animate(function(){bottom : "0px";}, 2000);
                $('#box1').animate(function(){bottom : "0px";}, 2000);
                })
            });
    </script>
</head>
<body>
    <div id="box" ></div>
    <div id="box1"></div>
    <br>
    <a href="#">Click Me!</a>
</body>
</html>

尝试同时对它们进行动画处理：

    $(function(){
        $('a').click(function(){
            $('#box, #box1').animate({top: "300px"}, 2000);
        });
    });

此外，当<body>没有大小时，您的bottom: 0px不会执行任何操作

我更改了它以移动框的高度。

演示：http://jsfiddle.net/maniator/fjVpZ/

$('a').click(function(){
  $('#box').animate({bottom : 0}, 2000);
  $('#box1').animate({bottom : 0}, 2000);
})

试试看。代码中存在一些语法错误。

  $(function(){
     $('a').click(function(){     
         $('#box,#box1').animate({top:"100%"}, 2000);
    }); 
});

CSS（绝对代替相对）

#box{
        background:red;
        width: 100px;
        height: 300px;
        position: absolute;
        top:0;
    left:0;
    }
    #box1{
        background: blue;
        width: 100px;
        height:300px;
        position: absolute;
    top: 0;right:0;
    }
    a{
        position:absolute;
        top: 0;
        left: 550px;
    }

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>Test</title>
    <style type="text/css">
        #box{
            background:red;
            width: 300px;
            height: 300px;
            float: left;
            position: absolute;
        }
        #box1{
            background: blue;
            width: 300px;
            height:300px;
            float: right;
            position: absolute;
            right: 0;
        }
        a{
            position:absolute;
            top: 310px;
            left: 550px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $('a').click(function(){
                $('#box').animate({bottom : 0}, 2000);
                $('#box1').animate({bottom : 0}, 2000);
                })
            });
    </script>
</head>
<body>
    <div id="box" ></div>
    <div id="box1"></div>
    <br>
    <a href="#">Click Me!</a>
</body>
</html>

在JS小提琴上：http://jsfiddle.net/xkizer/yym6s/

你的语法是错误的。我想你的意思是这个。

function(){
    return { bottom: "0px" };
}

不

function(){
    bottom: "0px";
}

所以这里有一个快速解决方案。更改此内容

$(function(){
    $('a').click(function(){
        $('#box').animate(function(){bottom : "0px";}, 2000);
        $('#box1').animate(function(){bottom : "0px";}, 2000);
    });
});

自：

$(function(){
    $('a').click(function(){
        $('#box, #box1').animate( {bottom : "0px" }, 2000);
    });
});

此外，您还需要为 document.body 定义一个高度，以便项目可以移动。

.animate() API ： http://api.jquery.com/animate/

.animate( properties [, duration] [, easing] [, complete] )

属性是对象文字，而不是函数。例：

{ body: 1 }

相关内容

最新更新

热门标签：