Jquery provides complete set of methods to do simple animation effects on html elements. In this post i am going to explain how to move divs around a another div container from the inside. In this example two divs will move in opposite directions and will meet at the starting point.Then both divs will dissapear with an animation effect. First we have to create the container and moving divs as shown in the code snippet below

In the above code two divs which are used for moving is wrapped inside the main container.

First we have to get the width and height of the div container and make the neccesary calculations to define the area for moving dis. We can use width() and height() on element provided by jquery library. Following code contains the code for defining the dimensions for moving area.

var container_width = $('#main_container').width();
var container_height = $('#main_container').height();

var movable_div_width  = 100;
var movable_div_height = 100;

var movable_div_margin = 3;


var allowed_width = container_width - (movable_div_width + (movable_div_margin * 2));
var allowed_height = container_height - (movable_div_height + (movable_div_margin * 2));

• First 2 lines of code get the width and height of the main container window for moving.
• Next we can set the width and height of moving divs. I have used same width and height for both divs in this example.The number is defined in pixels.
• Next i have set the margin of moving divs from the main container.I have defined 3pixels from each side.
• Then the calculations for allowed area is done. We have reduce the width or height of the moving div plus margins to get the maximum allowed range.
  So here maximum vertical distance to move is equal to allowed_height variable and maximum horizontal distance is equal to allowed_width variable.

Since we have done all the calculations and defined all the configuration settings ,now we can move onto the fun part using animations. Jquery provides a function called animate() which will perform a custom animation with the specified css properties. I have used animate function and basic css properties in this example.Lets move on to the code for the div animation.

                                //Part 1
                                var ids= '#moving_div1';
                                $(ids).show("slow");
                                $(ids).html("Div 1");
                        
                                $(ids).animate({left:'+='+allowed_width},5000)
                                .animate({top:'+='+allowed_height},5000)
                                .animate({left:'-='+allowed_width},5000)
                                .animate({top:'-='+allowed_height},5000);

                                $(ids).animate({opacity:'0.5'},2000);
                                $(ids).slideUp();

                                // Part 2
                                var ids= '#moving_div2';
                                $(ids).show("slow");
                                $(ids).html("Div 2");
                        
                                $(ids).animate({top:'+='+allowed_height},5000)
                                .animate({left:'+='+allowed_width},5000)
                                .animate({top:'-='+allowed_height},5000)
                                .animate({left:'-='+allowed_width},5000);

                                $(ids).animate({opacity:'0.5'},2000);           
                                $(ids).slideUp();

• I have commented the code as Part1 and Part 2. Part1 is for the div that moves to the right direction and Part is for the div that moves to the bottom direction.
• First three lines in each part defines the div id,displays the div and assign content to it.
• Next 4 lines containes the simple animation code for each of 4 directions.
• In Part1 the div moves allowed_width amount of pixels from the current left position of the div and then moves allowed_height number of pixels from the current top postion. This move continues until one round completes. Each move in one direction takes 5 seconds(5000 miliseconds).
• In Part2 div 2 moves like the same way as above but in the opposite direction.
• Div will be moved one round in 20 seconds and next 2 lines of code will reduce the opacity of both divs to .5 in 2 seconds.
• Then both divs will be cleared and erased from the main_container using slideUp method.

You can customize these animations using other css properties and make your own sliding and moving divs in your web designs.

    
        
        
    
    


        

                        

                        

        
        Start

        

    

Download Jquery Effects Examples
Jquery Effects Examples Demo