Develop Reference

slider won't work properly

I am trying to animate my list item towards right but it animate all item towards right at once but I want it to be one after another ..here is my jQuery
var I,
total_slide = $('#slide li').length,
slide = $('#slide li');
function run() {
for (I = 1; I <= total_slide; I++) {
var total = total_slide - I
$(slide).eq(total).animate({
left: '700px'
}, 4000);
}
}
run()

You have to use setTimeout function to make pauses between animations:
function run(){
var timeout = 0, delay = 4000;
$("#slide li").each(function(){
var $li = $(this);
setTimeout(function(){
$li.animate({ left: 700 }, delay);
}, timeout);
timeout += delay;
});
}
Example
Also I would recommend to use CSS-animations whenever it's possible:
Example with CSS-animations

jQuery animation for each element

I do not have much experience in animation on Jquery. I want to make a simple animation that will highlight my text line by line with the possibility of stopping. I know how to do something like this for one line but I have no idea how to deal with loop.
here is my code:
var lines = $('#page')[0].getClientRects();
for (var i=0, max = lines.length; i < max; i++)
{
$('#under_liner')
.queue(function() {
$(this).css('top', lines[i].bottom).dequeue();
})
.animate({
width: lines[i].right - lines[i].left
}, 1000 )
.queue(function() {
$(this).css('width', 0).dequeue();
});
}
and jsfiddle http://jsfiddle.net/mz03kfua/2

I don't know if this is exactly what you are looking for, but here's how I'd do it.
Make a function that does the underlining
Make a recursive call on animation callback
Create a global variable to keep count of the current underlined line
Add a boolean that stops the function when false
var lines = $('#page')[0].getClientRects();
var play = true;
var index = 0;
underlineLine();
$('button').click(function(){
play = !play
if(play){
underlineLine()
$(this).html("STOP")
}else{
$(this).html("CONTINUE")
}
})
function underlineLine(){
if(index >= lines.length) return
if(play){
$('#under_liner').css('top', lines[index].bottom).dequeue();
$('#under_liner').css('width','0px');
$('#under_liner').animate({
width: lines[index].right - lines[index].left
}, 1000, function(){
underlineLine(index++)
})
$('#under_liner').css('width', 0).dequeue();
}
}
HERE IS A FIDDLE WITH THE CODE.
Hope it helps.

http://jsfiddle.net/mz03kfua/4/
var lines = $('#page')[0].getClientRects();
var current = 0;
var element;
function animateLine() {
if(typeof lines[current] !== "object") {
return;
}
var line = lines[current];
element = jQuery("<div />", {"class": "under_liner"}).prependTo("#page");
element.css({top: line.bottom}).animate({width: line.width}, 1000, function() {
current++;
animateLine();
});
}
function stopLine(e) {
e.preventDefault();
element.stop(true);
}
jQuery(".stop").click(stopLine);
animateLine();

Stop .animate() on last image

I'm trying to make a gallery of images to scroll using up/down buttons. So far I go the animation but now I need to make it stop on the first and last image.
This is what I got so far, jsfiddle.net/sJDMq/47 (don't mind the buttons, I still need to work on them but they are there, top and bottom red boxes)
Thanks!
$(document).ready(function() {
$(".down_button").click(function () {
$(".scroll-products").animate({marginTop: '-=700px'}, 300);
});
$(".up_button").click(function () {
$(".scroll-products").animate({ marginTop: '+=700px' }, 300);
});
});

I wouldn't have done it this way but just going with what you started with I would just let this JS do the trick:
$(document).ready(function(){
var curIndex = 0;
var height = 700;
var maxHeight = 0;
var allImages = document.getElementsByClassName("sidebar_images");
for(var i=0; i<allImages.length; i++) {
maxHeight += allImages[i].offsetHeight;
}
var maxIndex = Math.ceil(maxHeight/height);
$(".down_button").click(function () {
if(curIndex < maxIndex) {
$(".scroll-products").animate({marginTop: '-='+height+'px'}, 300);
curIndex++;
}
});
$(".up_button").click(function () {
if(curIndex > 0){
$(".scroll-products").animate({ marginTop: '+='+height+'px' }, 300);
curIndex--;
}
});
});
I just updated your fiddle here.

How do you create a loop of image animations in javascript

I have a series of images I want to display one after the other. The kicker is they need to have a set time between each image displaying.
here is my code
setTimeout(function() {
images[0].transitionTo({
opacity: 1,
duration: 0
});
}, 200);
setTimeout(function() {
images[1].transitionTo({
opacity: 1,
duration: 0
});
}, 400);
setTimeout(function() {
images[2].transitionTo({
opacity: 1,
duration: 0
});
}, 600);
..etc (I have about 35 images)
How can express the same thing in a loop? I'm using the KinetciJS library
I tried using set interval or set timeout but the loop keeps iterating while the timer waits and the array goes out of bounds.
Thanks for any help you can give.

Like this:
/**
* Loop images every second.
*/
(function() loopImages() {
var interval = 1000,
numOfImage = 35,
currImage = 1;
function loop() {
if (currImage > numOfImage) {
currImage = 1;
}
// display current image in your way.
}
setInterval(loop, interval);
})()

try this...
var numberOfImages = 35;
for(var i = 0; i < numberOfImages; i++) {
setTimeout(function() {
images[i].transitionTo({
opacity: 1,
duration: 2
});
}, (200 * (i + 1)) );
}
Hope this helps.

Another option is to use an incrementor instead of a traditional loop.
Knowing that your image collection is an array, I used the 'currentIteration' variable to
keep track of current index position, and initiated by calling the initAnimation() function. This keeps everything pretty generic and should work regardless of the number of images.
This would allow you to control when the next image animation method is called without being confined to a loop, and could be extended to only be called once the transition is complete if a duration was assigned.
var images = ['pic1','pic2','pic3','pic4','pic5'];
var currentIteration = 0;
function initAnimation(){
animate();
}
function animate(){
if(currentIteration < image.length){
window.setTimeout(
function(){transition()}
,800)
}
}
function transition(){
images[currentIteration].transitionTo({
opacity: 1,
duration: 0
});
currentIteration++;
animate();
}

Something like this might do the trick (please note this is untested)
var images; // your images
var idx = 0; //start index
function transition(){
if(idx < images.length){
var image = images[i];
image.transitionTo({
opacity: 1,
duration: 0
});
idx++;
}else{
window.clearInterval(intVal);
}
}
var intVal = window.setInterval(transition,200);

How to fade in divs in sequence with Javascript (jQuery)?

What i want is to fade in my sidebar boxes after each other on page load by adding a class.
I have tried the following:
var a = $(".sidebar-box"), delayTime = 2000;
for(var i = 0; i < a.length; i++) {
setTimeout(function(
var ai = $(a[i]);
ai.addClass("fade in");
console.log(ai);
), delayTime);
console.log(delayTime);
delayTime += 2000;
}
The problem is, by the time the class gets added the first time, i already is 4, so the class only gets added to the last box, when actually it should be added to the first one.

You need to create a separate function so that variable i is copied each time:
var a = $(".sidebar-box"), delayTime = 2000;
var func = function(i)
{
setTimeout(function() {
var ai = $(a[i]);
ai.addClass("fade in");
}, delayTime);
}
for(var i = 0; i < a.length; i++) {
func(i);
delayTime += 2000;
}

Instead of adding a class and animating via CSS, if you are okay with using jQuery's fadeIn() method, you can have it like:
var a = $(".sidebar-box"), delayTime = 2000, i = 0;
function animateSideBar() {
if(i >= a.length) return;
// call fadeIn, and pass this function itself as the completion callback
$(a[i]).fadeIn(delayTime, animateSideBar);
i++;
}
animateSideBar(); // start it