0

div2つの要素を持つHTMLページがあります。1つは赤で、もう1つは青です。赤いものは左上隅にあり、青いものは右上隅にあります。「クリックして」リンクがあり、クリックするとアニメーション化されます。両方のボックスが下に移動するはずです。それは起こっていません。誰かが理由を教えてもらえますか？

  <!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(){
     $('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 に答える
0 
$('a').click(function(){
  $('#box').animate({bottom : 0}, 2000);
  $('#box1').animate({bottom : 0}, 2000);
})

それを試してみてください。コードにいくつかの構文エラーがありました。

于 2012-06-06T21:42:18.610 に答える
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 Fiddle の場合: http://jsfiddle.net/xkizer/yym6s/

于 2012-06-06T22:05:20.690 に答える