We Keep Coding

Jquery image scroller slow and jerky

So I built this image scroller with little thumbnail images at the bottom, I wanted the thumbnails to scroll left and right when you hover over an indicated area and stop when the last one comes into view ( and the same with the first one for the other direction) The code that I came up with works for a little while on the page but after a while it starts to get slow and jerky so I was wondering if there was a cleaner way to accomplish the same thing.
The code is:
var licount = $('.hs_cos_flex-slides-thumb li').length; //counts rows in list
var thumbwidth = licount * 210; //gets width of all rows
var viewwidth = $(".hs-cos-flex-slider-control-panel").width(); //gets width of sarounding div
var scrollwidth = thumbwidth - viewwidth; //gets width where last row is visible
var intervalId = window.setInterval;
$( ".thumb-for" ).hover(
function() {
var scrollposition = $(".hs_cos_flex-slides-thumb").position().left; //calculates how far left it has moved
var absposition = Math.abs(scrollposition); //gets absolute value of left movement
var shover = true;
if ( scrollwidth > (absposition + 209) ){
$('.hs_cos_flex-slides-thumb').animate({
right: '+=210px'
}, 1500, 'linear');
absposition+=210;
}
intervalId = window.setInterval(moveticker, 1500)
function moveticker() {
if ( scrollwidth > (absposition + 209) ){
$('.hs_cos_flex-slides-thumb').animate({
right: '+=210px'
}, 1500, 'linear');
absposition+=210;
}
};
}, function() {
window.clearInterval(intervalId);
}
);
$( ".thumb-back" ).hover(
function() {
var scrollposition = $(".hs_cos_flex-slides-thumb").position().left; //calculates how far left it has moved
var absposition = Math.abs(scrollposition); //gets absolute value of left movement
var shover = true;
if ( scrollposition < 0 ){
$('.hs_cos_flex-slides-thumb').animate({
right: '-=210px'
}, 1500, 'linear');
scrollposition+=210;
}
intervalId = window.setInterval(moveticker, 1500)
function moveticker() {
if ( scrollposition < 0 ){
$('.hs_cos_flex-slides-thumb').animate({
right: '-=210px'
}, 1500, 'linear');
scrollposition+=210;
}
};
}, function() {
window.clearInterval(intervalId);
}
);

jQuery - end setinterval after X rund

I have a little slider im working on which is almost there im jsut having some trouble with me jQuery.
So first off:
I want my slider to reset after the interval has run x amount of times.
It was my understanding that the following would work but it doesn't seem to take. 6000, slides, function() { homesliderend();
so lets say slides = 2 set interval should call homesliderend(); but it doesn't the interval just keeps running.
Second Issue: I'm also trying to get it to add 100% to lengther every 6 seconds. But instead of adding 100 each time its just setting it to 100 its not multiplying.
jQuery(document).ready(function($) {
"use strict";
function homesliderend() {
$(".lengther").animate({
left: "0%"
}, 500);
}
function homeslider() {
var slides = $(".slide.t-align").length,
lwidth = slides * 100,
n = 0;
$(".lengther").css("width", lwidth + "%");
setInterval(function() {
var tn = n + 100;
$(".lengther").animate({
left: "-" + tn + "%"
}, 500);
}, 6000, slides, function() {
homesliderend();
});
}
homeslider();
});

The setInterval will not stop automatically, you need to clear the interval to stop it.
Also you need to increase the value of n to increase the left param
jQuery(document).ready(function ($) {
"use strict";
function homesliderend() {
$(".lengther").animate({
left: "0%"
}, 500);
}
function homeslider() {
var slides = $(".slide.t-align").length,
lwidth = slides * 100,
n = 0;
$(".lengther").css("width", lwidth + "%");
var interval = setInterval(function () {
var tn = ++n * 100;
$(".lengther").animate({
left: "-" + n + "%"
}, 500);
//if the last item is slided then stop the animation and run homesliderend
if (n == slides) {
clearInterval(interval);
homesliderend();
}
}, 6000);
}
homeslider();
});

Make animation with several div's in a loop

I have a working animation jquery script here: jsfiddle
var speed = 1500;
var margin = 50;
var start = 200;
var next = 1400;
setTimeout(function() {
$("#foo").show().animate({
// marginLeft: startPoint,
marginLeft: margin // endPoint
}, speed);
},start + next * 0);
setTimeout(function() {
$("#bar").show().animate({
// marginLeft: startPoint,
marginLeft: margin // endPoint
}, speed);
},start + next * 1);
setTimeout(function() {
$("#foobar").show().animate({
// marginLeft: startPoint,
marginLeft: margin // endPoint
}, speed);
},start + next * 2);
I would like to change all the div id's into classes and then run a loop in jquery instead - similar to this: animating-several-divs-in-a-sequence.
$(function () {
function show() {
$('.project_box:not(.completed):first').show(500, function () {
$(this).addClass('completed');
show();
});
}
show();
});
I would also like to run the animation from outside the body-tag ("startPoint") and make it end at its current "endPoint".
Any help is much appreciated!
Note: Please have in mind, that I'm a newbie into jQuery and English is not my spoken language. :-)

Here suppose you name the class as class="test". you can do this :
$(document).ready(function(){
var speed = 1500;
var margin = 50;
var start = 200;
var next = 1400;
$('.test').each(function(index,element){
setTimeout(function() {
$(element).show().animate({
// marginLeft: startPoint,
marginLeft: margin // endPoint
}, speed);
},start + next * index);
});
});
see here : http://jsfiddle.net/w7o0vezs/

Create Random Falling Object in Jquery

I trying to make the div fall from top to bottom.
Here is the code that i tried but it doesn't satisfy my needs .I want to generate the 20 div once ready then how to make that 20 div falling continuously from top to bottom consistently. Is it possible to do that in jquery.
http://jsfiddle.net/MzVFA/
Here is the code
function fallingSnow() {
var snowflake = $('<div class="snowflakes"></div>');
$('#snowZone').prepend(snowflake);
snowX = Math.floor(Math.random() * $('#site').width());
snowSpd = Math.floor(Math.random() + 5000);
snowflake.css({'left':snowX+'px'});
snowflake.animate({
top: "500px",
opacity : "0",
}, snowSpd, function(){
$(this).remove();
fallingSnow();
});
}
var timer = Math.floor(Math.random() +1000);
window.setInterval(function(){
fallingSnow();
}, timer);
Much Appreciate your Help.
Thanks

Not sure if this is what you want.
I am animating 20 snowflakes, wait until animation finishes for all of them, then restart all over again.
jsfiddle
function fallingSnow() {
var $snowflakes = $(), qt = 20;
for (var i = 0; i < qt; ++i) {
var $snowflake = $('<div class="snowflakes"></div>');
$snowflake.css({
'left': (Math.random() * $('#site').width()) + 'px',
'top': (- Math.random() * $('#site').height()) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake);
}
$('#snowZone').prepend($snowflakes);
$snowflakes.animate({
top: "500px",
opacity : "0",
}, Math.random() + 5000, function(){
$(this).remove();
// run again when all 20 snowflakes hit the floor
if (--qt < 1) {
fallingSnow();
}
});
}
fallingSnow();
Update
This version creates 20 divs only once, and animate them again and again.
jsFiddle
function fallingSnow() {
var $snowflakes = $(),
createSnowflakes = function () {
var qt = 20;
for (var i = 0; i < qt; ++i) {
var $snowflake = $('<div class="snowflakes"></div>');
$snowflake.css({
'left': (Math.random() * $('#site').width()) + 'px',
'top': (- Math.random() * $('#site').height()) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake);
}
$('#snowZone').prepend($snowflakes);
},
runSnowStorm = function() {
$snowflakes.each(function() {
var singleAnimation = function($flake) {
$flake.animate({
top: "500px",
opacity : "0",
}, Math.random() + 5000, function(){
// this particular snow flake has finished, restart again
$flake.css({
'top': (- Math.random() * $('#site').height()) + 'px',
'opacity': 1
});
singleAnimation($flake);
});
};
singleAnimation($(this));
});
};
createSnowflakes();
runSnowStorm();
}
fallingSnow();
Update2
This one that initializes the left once the animation is done for each snowflake, looks more natural in my opinion.
Also changed the delay from
Math.random() + 5000
to
Math.random()*-2500 + 5000
demo

This is simple.
Your design of function must be this.
function snowflake()
{
if($(".snowflakes").length <= 20)
{
generate_random_snowflake();
}
else
{
call_random_snowflake();
}
}

check this out, pretty simple i just added a function that triggers jquerysnow() and then calls itself again wit random time
updated code now it will just create 20 snow flakes
snowCount = 0;
function snowFlakes(){
console.log(snowCount);
if(snowCount > 20){
return false
}else{
var randomTime = Math.floor(Math.random() * (500) * 2);
setTimeout(function(){
snowCount = snowCount +1;
jquerysnow();
snowFlakes();
},randomTime);
}
}
function jquerysnow() {
var snow = $('<div class="snow"></div>');
$('#snowflakes').prepend(snow);
snowX = Math.floor(Math.random() * $('#snowflakes').width());
snowSpd = Math.floor(Math.random() * (500) * 20);
snow.css({'left':snowX+'px'});
snow.html('*');
snow.animate({
top: "500px",
opacity : "0",
}, 2000, function(){
$(this).remove();
//jquerysnow();
});
}
snowFlakes()
http://jsfiddle.net/v7LWx/22/

Horizontal jquery scroller using position:absolute; with constant scroll

I've managed to get this far and it works great for solid width divs but can't work out how to manipulate it to work when the width of the div changes.
Question: How do I make this function take into account the different div widths after each 'round'?
var horizontalScroller = function($elem) {
var left = parseInt($elem.css("left"));
var temp = -1 * $('#horizontalScroller li').width();
if(left < temp) {
left = $('#horizontalScroller').width();
$elem.css("left", left);
}
$elem.animate({ left: (left-60) }, 2000, 'linear', function () {
horizontalScroller($(this));
});
}
$(document).ready(function() {
var i = 0;
$("#horizontalScroller li").each(function () {
$(this).css("left", i);
i += $(this).width();
horizontalScroller($(this));
});
});
Working example (with fixed width): http://jsfiddle.net/GL5V3/
Working example (with different widths): http://jsfiddle.net/wm9gt/

Well this was mildly fun, understood how your code works, but before I did that...
I rewritten it to this: (working fiddle)
function horizontalScroller(ulSelector) {
var horizontalSpan=0;
var collection=[];
function animate(index) {
var cur=collection[index];
var left=parseInt(cur.elem.css('left'));
if(left < cur.reboundPos) {
left+=horizontalSpan;
console.log(left);
cur.elem.css('left',left);
}
cur.elem.animate(
{ left: (left-60) },
2000,
'linear',
function () {animate(index)}
);
}
$(ulSelector).find('li').each(function() {
var $this=$(this);
var width=$this.width();
$this.css('left',horizontalSpan);
collection.push({reboundPos: -1 * width, elem: $this});
horizontalSpan+=width;
animate(collection.length-1);
});
console.log(collection);
console.log(horizontalSpan);
}
$(document).ready(function() {
horizontalScroller('#horizontalScroller');
});
Then I went back to your code and did this:
var horizontalSpan = 0;// swapped i for a "global" variable
var horizontalScroller = function($elem) {
var left = parseInt($elem.css("left"));
var temp = -1 * $elem.width();// updated to the correct width
if(left < temp) {// now out of bounds is properly calculated
left += horizontalSpan;// proper "wrapping" with just one addition
$elem.css("left", left);
}
$elem.animate({ left: (left-60) }, 2000, 'linear', function () {
horizontalScroller($(this));
});
}
$(document).ready(function() {
$("#horizontalScroller li").each(function () {
$(this).css("left", horizontalSpan);// horizontalSpan!!!
horizontalSpan += $(this).width();// horizontalSpan!!!
horizontalScroller($(this));
});
});
If you've got questions or want to tweak it a bit. I'd be happy you to help you along. But my hopes are that you will manage on your own.
P.S. My initial comment was rude, you're horizontal scrolling is ok thumbs up (but you were hoping the values for some of those .width() calls to be way different)