Question

我有一个包含两个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>

Answer 1

尝试同时制作动画：

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

如果bottom: 0px

的大小不合适，<body>也无效

我改变它以移动盒子的高度。

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

Answer 2

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

试试吧。您的代码中存在一些语法错误。

Answer 3

  $(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;
    }

Answer 4

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

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 }

Answer 5

  <!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/

jQuery simultaneous animation不工作

5 个答案: