CODEWITHSUNDEEP
jqueryjquery-animate
Kaushik Balasubramanain
Kaushik Balasubramanain

Reputation: 1258

jQuery simultaneous Animation not working

I have an HTML page with two div elements. One is red and the other is blue. The red one is in the top left corner while the blue one is on the top right. I have a "click me" link, which when clicked, should animate. Both the boxes should move down. It is not happening. Can someone tell me why? 

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

Upvotes: 0

Views: 416

Answers (5)

Larry Battle
Larry Battle

Reputation: 9178

Your syntax is wrong. I think you meant this.

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

not 

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

So here's a quick fix. Change this

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

To:

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

Also you need a defined height for document.body so the items can move.

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

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

properies are objects literals, not functions. Example:

{ body: 1 }

Upvotes: 0

Kizer
Kizer

Reputation: 1666

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

On JS Fiddle: http://jsfiddle.net/xkizer/yym6s/

Upvotes: 0

khaled_webdev
khaled_webdev

Reputation: 1430

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

css (absolute in place of relative)

#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;
    }​

Upvotes: 0

Naftali
Naftali

Reputation: 146310

Try animating them both at the same time:

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

Also your bottom: 0px does nothing when there is not size to the <body>

I changed it to move the height of the box.

Demo: http://jsfiddle.net/maniator/fjVpZ/

Upvotes: 3

ahren
ahren

Reputation: 16961

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

Try that. There were a few syntax errors in your code.

Upvotes: 0

Related Questions