We Keep Coding

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.

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.

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();

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" />

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

How to animate the HTML contents using jquery..

I have an HTMl texts that is getting changed dynamically.Now as per my requirement i have to display them in animated form like fading and in some motion but i am not aware of this ..
Here is my Code..
<script type="text/javascript">
var v = {};
v[0] = "Your Text<br/>Hello";
v[1] = "Your Text2<br/>Hello2";
v[2] = "Your Text3<br/>Hello3";
var i = 0;
window.setInterval(function () {
$("#dynamicMessage").html(v[i]);
if (i == 2) {
i = 0;
} else {
i = i + 1;
}
}, 10000);
</script>
Please have a look and let me know how can i animate my text contents in HTML..
Thanks..

You could use a combination of fadeOut() and fadeIn()
$("#dynamicMessage").fadeOut( "slow", function() {
$("#dynamicMessage").html(v[i]).fadeIn('slow');
})
Check this demo - http://jsfiddle.net/xw2j6hsp/1/
UPDATE
Saw this comment, on #laruiss answer:
"If there are other way by which i can show the text popping from the
left"
Thought i'd code this up for you. Just add in some animation. check it - http://jsfiddle.net/m6bnq1ja/

There's no animating the content change. What you can do is hide the element, change its content, then fade it in, something like below. It'll probably look the same to the user.
$("#dynamicMessage").hide().html(v[i]).fadeIn();
or
$("#dynamicMessage").fadeOut(500, function() {
$(this).html(v[i]).fadeIn(500);
});

Don't forget to clearTimeout (or clearInterval)
var v = [
"Your Text<br/>Hello",
"Your Text2<br/>Hello2",
"Your Text3<br/>Hello3"
],
i = 0,
timeout = null,
change = function (text) {
var $dynamicMessage = $("#dynamicMessage")
.fadeOut("slow", function() {
$dynamicMessage.html(text).fadeIn();
});
if (i == 2) {
i = 0;
} else {
i = i + 1;
}
timeout = window.setTimeout(function() {change(v[i]);}, 2000);
}
change(v[i]);
$(window).unload(function() {window.clearTimeout(timeout); timeout = null;});
JSFiddle

var v = {};
v[0] = "Your Text<br/>Hello";
v[1] = "Your Text2<br/>Hello2";
v[2] = "Your Text3<br/>Hello3";
var i = 0;
window.setInterval(function () {
$("#dynamicMessage").fadeToggle( "slow", function() {
$("#dynamicMessage").html(v[i]).fadeToggle('slow');
});
if (i == 2) {
i = 0;
} else {
i = i + 1;
}
}, 4000);
Note : you can also use "fadeOut" & "fadeIn" in place of "fadeToggle"

Syntax or logical error in jquery/javascript

I have a variable number of promotional items (panels) that are in a sliding belt, that should be set to the width of a panel (300px) multiplied with the amount of panels.
It alerts the correct beltsize. With fixed numbers the slider works too. I suspect the error to be in the if/else if part. I am not even sure this is valid Javascript Syntax.
Any hint is appreciated.
$(window).ready(function(){
var whichpanel = 1;
var panels = $(".panel").length;
var beltsize = panels*300;
$('.belt').css({'width':beltsize});
});
$(window).ready(function promoslider(){
if (panels>whichpanel){
$('.belt').delay(7000).animate({'left':'-=300'}, 500);
whichpanel += 1;
}
else if (panels=whichpanel){
$('.belt').delay(7000).animate({'left':'0'}, 500);
whichpanel = 1;
}
setTimeout(promoslider, 0);
});
promoslider;
UPDATE! Here is the code that works for me now (http://jsfiddle.net/zr5Nd/10/):
$(window).ready(function () {
var whichpanel = 1;
var panels = $(".panel").length;
var beltsize = panels * 300;
$('.belt').css({
'width': beltsize
});
function movingdiv() {
if (panels > whichpanel) {
//alert('Panels:' + panels + '/whichpanel:' + whichpanel);
$('.belt').delay(1000).animate({
'margin-left': '-=300px'
}, 500);
whichpanel += 1;
} else if (panels == whichpanel) {
//alert('Panels:' + panels + '/whichpanel:' + whichpanel);
$('.belt').delay(1000).animate({
'margin-left': '0'
}, 500*panels);
whichpanel = 1;
} else {
alert('3');
}
setTimeout(movingdiv, 0);
}
setTimeout(movingdiv, 0);
});

You need to use the equality/identity operators (==/===) instead of the assignment operator = in your else if statement, e.g.
else if (panels == whichpanel){
$('.belt').delay(7000).animate({'left':'0'}, 500);
whichpanel = 1;
}
Also, I believe promoslider; is supposed to be promoslider();.

You should put the call of promoslider into $(window).ready as well, as the function does not yet exist otherwise. Plus you have to do the call this way promoslider(), promoslider alone will not result in a call.
And of course you have to use the equals-operator == instead of the assign-operator = in your if else-statement.

use panels === whichpanel instead of panels=whichpanel
variables whichpanel, panels have lost their scope in the if/else if part.

.next() not working as intended

So,
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).prev().addClass('active');
}
works fine, it adds the class "active" to this previous div of the same kind.
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).next().addClass('active');
}
However, adds the class to the next div (as i intend for it to do) for about 0.5 of a second BUT then removes it.
Here's ALL of the jQuery (as per your comments below) - Please do not comment on my horrible code organization
$(window).load(function () {
// Initial variables
var numberSlides = 0;
var currentSlide = 1;
var ready = true;
var pageWidthR = $(document).width() - 352;
var pageWidthL = $(document).width() - 352;
// Update number of slides by number of .slide elements
$('#features-slider .slide').each(function () {
numberSlides++;
});
// Go through each slide and move it to the left of the screen
var i = 0;
$($('#features-slider .slide').get().reverse()).each(function () {
if (i == 0) {
} else {
var newWidth = i * 115;
$(this).css('left', '-' + newWidth + '%');
}
i++;
});
// Animate the first slide in
$('#features-slider .slide:last-child').addClass('active').animate({
left: 0
}, 1500);
// Remove the loading message
$('#loading').fadeOut(1000, function () {
$('#loading').remove();
// Now that we're done - we can show it
$('#features-slider').show();
});
/***** Left and Right buttons *****/
/* Right */
$('#rightbutton').click(function () {
var numberSlides = 0;
$('#features-slider .slide').each(function () {
numberSlides++;
});
var index = $('.slide.active').index() + 1;
if (!$('.slide').is(':animated') && index != 1) {
$('#features-slider .slide').each(function () {
if ($(this).hasClass('active')) {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) + 115;
} else {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) + 115;
}
$(this).animate({
left: newLeft + '%'
}, 1500);
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).prev().addClass('active');
}
});
}
});
/* Left */
$('#leftbutton').click(function () {
var numberSlides = 0;
$('#features-slider .slide').each(function () {
numberSlides++;
});
var index = $('.slide.active').index() + 1;
if (!$('.slide').is(':animated') && index != numberSlides) {
$('#features-slider .slide').each(function () {
if ($(this).hasClass('active')) {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) - 115;
} else {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft) - 115;
}
$(this).animate({
left: newLeft + '%'
}, 1500);
if ($(this).hasClass('active')) {
$(this).next().addClass('active');
$(this).removeClass('active').not($(this).next());
}
});
}
});
});
$(document).ready(function () {
// Hide the slider and show a loading message while we do stuff and the images / DOM loads - Also disable overflow on the body so no horizontal scrollbar is shown
$('body').css('overflow-x', 'hidden');
$('#features-slider').hide();
$('#loading').html('<center> <img id="loader" src="/wp-content/themes/responsive/library/images/ajax-loader.gif" /> Loading</center>');
});
RESOLVED
New left button function :
$('#leftbutton').click(function(){
var numberSlides = 0;
$('#features-slider .slide').each(function(){
numberSlides++;
});
var index = $('.slide.active').index()+1;
if( !$('.slide').is(':animated') && index != numberSlides ){
var done = false;
$('#features-slider .slide').each(function(){
if($(this).hasClass('active')){
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft)-115;
} else {
var currentLeft = $(this).css('left');
var newLeft = parseInt(currentLeft)-115;
}
$(this).animate({left: newLeft+'%'}, 1500);
if($(this).hasClass('active') && done == false){
$(this).next().addClass('active');
$(this).removeClass('active');
done = true;
}
});
});

If you're iterating forward through the elements, then it should be clear what's going on - you add the "active" class to the next element, and then the next iteration takes it away.
This is just a guess however as you did not post enough code for me (or anybody else) to be sure.
edit — ok now that you've updated the question, it's clear that the guess was correct. The .each() function will iterate forward through the elements. When an element has the "active" class, and the code removes it and adds it to the next element, then on the next iteration the work is undone.

Since you are referencing this and by the behavior you're describing, you are likely iterating a loop for a list of elements. As a result, you are completing the action you want but the next iteration is removing the previous changes due to your usage of removing a class and then adding the class back.
As it stands now, your code does not illustrate how this occurence can be happening.
Update:
As suspected, you seem to be looping as signified by: each(function(){. While iterating through your objects the class is being pushed forward and is not acting as desired. You are stating add the class to the next element, but remove it from the current element, and this behavior continues through your iteration.
On a side note, update your code to call removeClass() on the current object first, before adding it to the next object:
if ($(this).hasClass('active')) {
$(this).removeClass('active').next().addClass('active');
}

'Pulsing' a border in Javascript/JQuery

I am in the process of applying validation on a web form -one of the things I would like to do is add a pulsing border to the div which contains the erroneous input.
This solution: border highlighting loop with jquery and http://jsfiddle.net/Ue4wy/4/ pretty much hits the mark.
But I want to be able to fade the yellow border to black on the click handler & reset the loop (this example pauses the loop), so the next time the user hits submit it starts again.
Reseting the colour to black works using the code below (though I am sure there is a more elegant solution), but how do I reset the loop?
$('#weight').animate({
borderBottomColor: '#000',
borderLeftColor: '#000',
borderRightColor: '#000',
borderTopColor : '#000'
}, 'fast' );
Any ideas appreciated!

I've updated the update() function to accept an argument, i, which is then called in the click handler, along with window.clearTimeout():
var addClickHandler = function() {
$("div").click(function() {
window.clearTimeout(timer);
update(0);
});
};
This does require that the other calls to update() also need to pass the i:
var update = function(i) {
$("div").css("border-color", 'rgb(' + i + ',' + i + ',' + 0 + ')');
};
JS Fiddle demo.
Edited to amend the click-handler to offer a toggle (stop/start) for the animation:
var addClickHandler = function() {
$("div").toggle(function() {
window.clearTimeout(timer);
update(0);
}, function() {
anim.go();
});
};
JS Fiddle demo.
Edited for a slightly more context-aware click-handler, this version checks for the existence of the timer variable and, if it isn't found, starts the animation. If it is found then it clears the timeout, sets the timer to false and calls update(0) to reset the borders to black:
var addClickHandler = function() {
$("div").click(function() {
console.log(timer);
if (!timer){
timer = window.setTimeout(anim.go, 30);
}
else {
window.clearTimeout(timer);
timer = false;
update(0);
}
});
JS Fiddle demo.
References:
toggle().
window.clearTimeout().

Here's a jQuery UI effect to pulsate the border:
$.effects.borderPulsate = function(o) {
return this.queue(function() {
var elem = $(this),
mode = $.effects.setMode(elem, o.options.mode || 'show'),
times = (o.options.times || 5),
duration = o.duration ? o.duration : $.fx.speeds._default,
isVisible = elem.is(':visible'),
color = (o.options.color || 'rgb(255,255,0)'),
startColor = (o.options.startColor || elem.css('border-color') || 'transparent');
if (!isVisible) {
elem.show();
}
if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) {
times--;
}
for (var i = 0; i < times; i++) {
elem.animate({ 'border-color': color }, duration, o.options.easing, function() {
elem.css( 'border-color', startColor );
});
}
elem.animate({ 'border-color': color }, duration, o.options.easing, function() {
(o.callback && o.callback.apply(this, arguments));
});
elem
.queue('fx', function() { elem.dequeue(); })
.dequeue();
});
};
http://jsfiddle.net/cdeutsch/TjkNd/

You can change colors on all borders at the same time with borderColor, but you don't need to animate that. You could add a reset method to your object to take care of the whole thing:
var reset = function() {
i = 0;
step = 10;
up = true;
if(timer) window.clearTimeout(timer);
timer = null;
$('#weight').css('borderColor', '#000');
}
Then on your click handler, you call anim.reset() after anim.stop().