CODEWITHSUNDEEP
jquery
user2090835
user2090835

Reputation:

Animation with jquery doesn't work.

what is wrong with my code? the animation is about to change width of a cell between two values. the animation doesn't work. Could you fix the script section? I'm in hurry.

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
    .tbl{display: table;}
    .cell{display: table-cell;}
    .container{background: url("bgs/12.png")no-repeat;width: 179px;height: 119px;}
    #leftP{background: url("bgs/16.png")no-repeat right;width: 86px;height: 119px}
</style>
<script type="text/javascript">

    $(document).ready(function(){
        function Animation(){
            $('leftP').animate({width:'48px'},"slow");
            $('leftP').animate({width:'86px'},"slow","",Animation());

        }
    });
</script>
<title></title>
</head>
<body>
<div class="container tbl">
    <div id="leftP" class="cell width"></div>
    <div class="cell"></div>
</div>
</body>
</html>

Upvotes: 1

Views: 1404

Answers (4)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

There are a number of problems with your code, I'll try to address them all:

  1. Your selectors are wrong, you need to use the id-selector #leftP
  2. You need to do the animations in sequence, so execute the second animation in the callback of the first animation.
  3. You need to call the Animation-function the first time for everything to start. In my example I'm using an immediately invoked function expression.

Here is what I believe you are looking for.

$(function () {
    (function Animation(){
        $('#leftP').animate({width:'48px'},"slow", function () {
           $('#leftP').animate({width:'86px'},"slow","",Animation());
        });    
    })();
});

Demo

Upvotes: 0

Devang Rathod
Devang Rathod

Reputation: 6736

Try this : you defined leftP for animation but id must be #leftP

$(document).ready(function(){
    function Animation(){
        $('#leftP').animate({width:'48px'},"slow");
        $('#leftP').animate({width:'86px'},"slow","",Animation());

    }

    Animation();
});

Upvotes: 1

Dipesh Parmar
Dipesh Parmar

Reputation: 27354

You need to call function for the first time.

function Animation()
{
    $('#leftP').animate({width:'48px'},"slow");
    $('#leftP').animate({width:'86px'},"slow","",Animation());
}

$(document).ready(function()
{
    Animation();
});

Also You forget to define ID in jQuery selector.

$('#leftP')

Upvotes: 1

Reigel Gallarde
Reigel Gallarde

Reputation: 65254

you are not calling Animation() anywhere... it won't do anything unless you call this function, Animation(), somewhere...

Upvotes: 3

Related Questions