0

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

5 回答 5

3

尝试同时为它们设置动画：

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

bottom: 0px当没有尺寸时，你什么也不做<body>

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

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

于 2012-06-06T21:43:21.747 回答
0

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

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 }
于 2012-06-06T22:03:51.933 回答
0 
  <!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/

于 2012-06-06T22:05:20.690 回答
0 
$('a').click(function(){
  $('#box').animate({bottom : 0}, 2000);
  $('#box1').animate({bottom : 0}, 2000);
})

试试看。您的代码中有一些语法错误。

于 2012-06-06T21:42:18.610 回答
0 
​  $(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;
    }​
于 2012-06-06T22:00:58.463 回答