CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Benoit Ben Bernadel
Benoit Ben Bernadel

Reputation: 1

jQuery animate array skip to last

I am trying to animate an array of images using Jquery. When I have one element in the array it works fine but when I have more then one element it just animates the last element of the array.

I set the src of the img tag and move it to the right. The moveRight function move the image to the right and call moveLeft to move it to the left. The moveLeft function moves the image to the left and fade it.

$.each(imageArray, function (i, val) {
    $("#b").attr("src", imageArray[i].src);
    moveRight();
}

function moveRight(){
    $("#b").animate({left: "+=500"}, 2000, moveLeft)
}

function moveLeft(){
    $("#b").animate({left: "-=500"}, 2000,fade)
}

Is there a way each image can be moved right and left / or just left or right instead of having the last one moving only. I am trying to figure out what is wrong with my code.

Upvotes: 0

Views: 122

Answers (4)

Jack
Jack

Reputation: 8941

Here's a very basic example of what you're trying to achieve. From here you can try and animate the transition, switch it so buttons activate a left/right change. I would suggest playing around with this until you comfortable with the basic functionality. From there you can look into plugins/libraries that can help you. http://jsfiddle.net/306Lqov5/1/

HTML

<img id="b" src="http://placehold.it/100/100&text=Image 1" />

JavaScript

var images = [
    'http://placehold.it/100/100&text=Image 1',
    'http://placehold.it/100/100&text=Image 2',
    'http://placehold.it/100/100&text=Image 3',
    'http://placehold.it/100/100&text=Image 4'
];

var index = 1, //start at one since we have the first image in by defualt
    img = $('#b');

setInterval(function(){
    img.attr('src', images[index]);
    index++; //index = index + 1;

    if (index == images.length){ //if we've reached the length of the array reset to zero
        index = 0;
    }
},2000); //switch ever 2 seconds

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try utilizing .queue(). Note, if changing src of same img element , would have to wait until each image loaded.

var imageArray = [
  "http://lorempixel.com/100/100/cats",
  "http://lorempixel.com/100/100/animals",
  "http://lorempixel.com/100/100/technics",
  "http://lorempixel.com/100/100/nature"
];

var b = $("#b");

var cycle = function cycle() {
  return b.queue("slide", $.map(imageArray, function(val, i) {
    return function(next) {
      $(this).fadeOut(50).attr("src", val);
      this.onload = function() {
        return $(this).fadeIn(50, function() {
          return moveRight.call(this).then(function() {
            return moveLeft.call(this)
          }).then(next);
        });            
      }
    }
  })).dequeue("slide");
};

function moveRight() {
  return $(this).animate({
    left: "500"
  }, 2000).promise()
}

function moveLeft() {
  return $(this).animate({
    left: 0
  }, 2000).promise()
}

var infiniteCycle = function infiniteCycle() {
  return cycle().promise("slide").then(infiniteCycle)
};

infiniteCycle();
#b {
  position: relative;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<img id="b" />

Upvotes: 0

kosmos
kosmos

Reputation: 4288

I think the best thing you can do is to use a recursive method. Here is an example (check jsFiddle):

var MyApp = {

    Items: {

        Elements: $('div'),

        Loaded: 0

    },

    Start: function(){
        if( this.Items.Elements.length == this.Items.Loaded ) return; // return.. or play a sound, then return to stop iterations

        this.Items.Elements.eq(this.Items.Loaded).animate({ left: '50%' }, { 
            duration: 1000,
            complete: function(){
                MyApp.Items.Loaded++;
                MyApp.Start();
            }
        });
    }

};

$(function(){ 
    MyApp.Start();
});

It's an example but you can do it easily by this way.

Upvotes: 1

Anarion
Anarion

Reputation: 1038

How about this variant: http://jsbin.com/xezetuboye/1/edit?html,js,output ?

var arr = [
  'http://e404.pw/pictures/evernote-logo.png',
  'http://e404.pw/pictures/font-face.png',
  'http://e404.pw/pictures/html-coder.jpg'
];
var count = 0;

function setImg(){
  if(arr.length <= count){ return; }
    $("#b").attr("src", arr[count]);
    moveRight();
    count++;
}

function moveRight(){
    $("#b").animate({left: "+=500"}, 2000, moveLeft);
}

function moveLeft(){
    $("#b").animate({left: "-=500"}, 2000, setImg);

}

setImg();

Upvotes: 0

Related Questions