CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Journey
Journey

Reputation: 65

Slide in images - JQuery

I am trying to make 7 of my "cards" img(s) slide in from the left to the center of the screen like they are now. I tried using:

function FetchCards() {
    $("#pack").css('margin-left', 0);
    $("#pack").css('margin-right', 0);
    $("#pack").animate({
        left: '-1000px'
    }, 'slow');
};
setTimeout(FetchCards, 7000);

But it's not working, not sure where I should declare the function "FetchCards", etc. Please help. Here is my current code:

http://plnkr.co/edit/L4wgzTDcV86tZK1eE23D?p=info

What I'm asking is where do I declare the function "FetchCards" and would my code work for making the images invisible until they slide in?

Upvotes: 0

Views: 90

Answers (2)

Frogmouth
Frogmouth

Reputation: 1818

see my example and tell me if it look like what you needed... EXAMPLE HERE: http://jsfiddle.net/CAqE4/

JS:

function FetchCards() {
    $("#pack").css({
        'margin-left': 0,
        'margin-right': 0
    }).animate({
        left: '-=1000px' // -= subtracts the number of pixel
    },function(){
        //this function will be called after #pack animate
        $(/*IMAGE SELECTOR*/).fadeIn(); //insert the image selector
    });
};
setTimeout(FetchCards, 7000);

CSS: Your image must have display:none in css.

Upvotes: 0

Alex Shilman
Alex Shilman

Reputation: 1547

Try this: 

function FetchCards() {
  $("#pack").css('margin-left', 0);
  $("#pack").css('margin-right', 0);
  $("#pack").animate({
    'margin-left': '-1000px'
  }, 'slow');
 }
setTimeout(function(){FetchCards();}, 7000);

Upvotes: 1

Related Questions