CODEWITHSUNDEEP
jqueryhtmlcss
Wajahat Kareem
Wajahat Kareem

Reputation: 325

Jquery Animation through pictures

I am learning jquery to make some cool animation. Right now I have been given an assignment on pictures which expands, contract and opacity changes as well , in the end it hides.

Here is my code: 

function play_pic1()
{
    var div = $("#img");
    div.animate({width:0},2000);
    div.animate({width:1100,opacity:0},4000);
    div.animate({opacity:1},4000);
    div.hide(4000);
}

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

The problem is it only works for one image, when I try to insert second image the second image become static.

I used Loops and Function but nothing helped. Kindly help me overcome this issue.

Upvotes: 1

Views: 163

Answers (5)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123367

You could pass the element you want to animate as a parameter of the function , e.g.

function play_pic1(element)
{
    var div = $(element);
    div.animate({width:0},2000)
       .animate({width:1100,opacity:0},4000)
       .animate({opacity:1},4000)
       .hide(4000);
}

$(document).ready(function(){
         play_pic1("#img1");
         play_pic1("#img2");       
});

After OP clarification: if you need to have sequential animation over different elements you could use Deferred objects like so

Example JSBin: http://jsbin.com/ilisug/1/edit

function animate(el)
{
    var div = $(el);
    return div.animate({width:0},2000)
       .animate({width:300,opacity:0},2000)
       .animate({opacity:1},2000)
       .hide(2000);
}

$(document).ready(function(){

    var dfd = $.Deferred(), 
        chain = dfd;

    var slide = ['#el1', '#el2', '#el3'];

    $.map(slide, function(el) {
        chain = chain.pipe(function() {
            return animate(el).promise();
        });
    });

    chain.done(function() {
       alert('done')
    });

    return dfd.resolve();
});

Upvotes: 2

Denys Séguret
Denys Séguret

Reputation: 382092

That's because you can't retrieve all your div by one ID : only one occurence of an id is possible in an HTML document.

You should use a class (<div class=img></div>) and replace

var div = $("#img");

with

var div = $(".img");

Upvotes: 1

Jai
Jai

Reputation: 74738

I think your issue is, using sameID for multiple elements #img will only affect the first element.

instead this you can use class .img and this code:

function play_pic1(){
 $(".img").each(function(){
   var div = $(this);
   div.animate({width:0},2000);
   div.animate({width:1100,opacity:0},4000);
   div.animate({opacity:1},4000);
   div.hide(4000); 
 });
}

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

try to use class $(".img")

Upvotes: 1

painotpi
painotpi

Reputation: 6996

The #img will be applicable for only the first image, you'll have to pass the selector as an argument to play_pic1()

function play_pic1(elem)
{
    var div = $(elem);
    //your code here
}

$(document).ready(function(){
         play_pic1("#img"); //pass the img selector to play_pic1
         play_pic1("#img2");       
});

Upvotes: 1

Rahul
Rahul

Reputation: 988

var div = $("#img");

above statement says only #img will be referenced. when you add an image dynamically, you will have to modify your code a bit. try passing an ID to this function and apply animate on that. something like 

function play_pic1(id)
{
    var div = $(id);
    div.animate({width:0},2000);
    div.animate({width:1100,opacity:0},4000);
    div.animate({opacity:1},4000);
    div.hide(4000);
}

Upvotes: 1

Related Questions