I have this jQuery code for a carousel but its not working as I supposed it should.
var totalItems = $('.inner li').length,
currentItem = 1,
$inner = $('.inner li'),
width = $inner.outerWidth(true);
setInterval(function() {
$inner.animate({
right: '+=' + width
}, 500);
currentItem += 1;
}, 500);
You can view the example at this FIDDLE
Thanks in advance.
EDIT:
This is the entire code I have working for another carousel.
$(document).ready(function() {
var totalItems = $('.inner li').length,
currentItem = 1,
$inner = $('.inner li'),
width = $inner.outerWidth(true),
speed = 400,
delay = 4000;
var timer = setInterval(function() {
if (currentItem === totalItems) {
$inner.animate({
right: '-=' + width * (totalItems-1) + 'px'
}, speed);
currentItem = 1;
} else {
$inner.animate({
right: '+=' + width
}, speed);
currentItem += 1;
}
}, delay);
$('.carousel').hover (function(ev) {
clearInterval(timer);
}, function(ev){
timer = setInterval(function() {
if (currentItem === totalItems) {
$inner.animate({
right: '-=' + width * (totalItems-1) + 'px'
}, speed);
currentItem = 1;
} else {
$inner.animate({
right: '+=' + width
}, speed);
currentItem += 1;
}
}, delay);
});
$('#right').click(function () {
if (currentItem === totalItems) {
$inner.animate({
right: '-=' + width * (totalItems-1) + 'px'
}, speed);
currentItem = 1;
} else {
$inner.animate({
right: '+=' + width,
}, speed);
currentItem += 1;
}
});
$('#left').click(function () {
if (currentItem === 1) {
$inner.animate({
right: '+=' + width * (totalItems-1) + 'px'
}, speed);
currentItem = totalItems;
} else {
$inner.animate({
right: '-=' + width
}, speed);
currentItem -= 1;
}
});
});
No, it doesn't.
It just set's up an interval at which the passed function is called, so if you pass 500ms as an interval, the function will be called (about) 500ms from now, then (about) 1 second from now, then ...
setInterval also has nothing to do with page load, if that is what you meant (e.g. it doesn't depend on body load or anything like that, but the moment it gets executed)
I'm saying about because browser timing isn't very exact (for several reasons). Also, you should save the returned value of setInterval in a variable, and make sure to clean up the interval when you don't need it anymore. Depending on browser, this is normally done automatically on page unload, but on some older browsers it might not happen until the browser is closed.
Edit: Looking at the fiddle, your problem is with css, not with javascript. Your li need to be positioned relative or absolute, otherwise setting right property will have no effect. You could also set margin-right/margin-left.
Related
I have a bunch of divs that all have gotten the same class 'a'. They all have position:absolute and are placed somewhere on the screen (using css). The divs closest to the left edge should be moved to the left (out of picture), the divs closest to the right edge should be moved to the right and regarding the remaining divs, the top ones move upwards and the rest downwards. I have made a fairly simple code but it doesn't seem to work. Any help would be appreciated but please keep in mind that I'm a beginner so hopefully no extremely complicated solutions.
$(document).ready(function() {
$(".button").on("click", function() {
var name = ('.a');
for (var i = 0; i < name.length; i++) {
var left = $(name[i]).css("left");
var top = $(name[i]).css("top")
if (left <= 30 + '%') {
$(name[i]).animate({
left: left - 50 + '%',
}, "slow")
} else if (left >= 70 + '%') {
$(name[i]).animate({
left: left + 50 + '%',
}, "slow")
} else if (top <= 50 + '%') {
$(name[i]).animate({
top: top - 50 + '%',
}, "slow")
} else {
$(name[i]).animate({
top: top + 50 + '%',
}, "slow")
}
}
}
}
I think you are a bit confused about iterating elements.
Try:
$(document).ready(function() {
$(".button").on("click", function() {
$(".a").each(function () {
var left = $(this).position().left;
var top = $(this).position().top;
if (left <= screen.width * 0.3) {
$(this).animate({
left: left - 50 + 'px',
}, "slow")
} else if (left >= screen.width * 0.7) {
$(this).animate({
left: left + 50 + 'px',
}, "slow")
} else if (top <= screen.height * 0.5) {
$(this).animate({
top: top - 50 + 'px',
}, "slow")
} else {
$(this).animate({
top: top + 50 + 'px',
}, "slow")
}
}
}
}
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();
});
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/
I don't know why but my animation which works perfectly fine on chrome but lags on iPhone. I am using jQuery to ease the work and have following functions.
function slideLeftTo(to, after) {
var page = $(to);
var current = $(".current");
if (page.length < 1) return;
if (current.length < 1) return;
if (page.attr("id") == current.attr("id")) return;
var endX = current.width();
page.css({ top: "0px", left: endX + "px", display: "block" });
current.css({ top: "0px", left: "0px" });
var x = endX;
var timer = setInterval(function() {
if (x < 0) {
x = 0;
clearInterval(timer);
}
page.css({ top: "0px", left: x + "px" });
current.css({ top: "0px", left: (x - endX) + "px" });
x -= 100;
if (x <= 0) {
after();
}
}, 50);
}
function slideRightTo(to, after) {
var page = $(to);
var current = $(".current");
if (page.length < 1) return;
if (current.length < 1) return;
if (page.attr("id") == current.attr("id")) return;
var endX = current.width();
page.css({ top: "0px", left: -endX + "px", display: "block" });
current.css({ top: "0px", left: "0px" });
var x = 0;
var timer = setInterval(function() {
if (x > endX) {
x = endX;
clearInterval(timer);
}
page.css({ top: "0px", left: (x - endX) + "px" });
current.css({ top: "0px", left: x + "px" });
x += 100;
if (x >= endX) {
after();
}
}, 50);
}
I can simply call these functions to work and they are working but are lagging. The way I call them is...
slideLeftTo('#div_id', function() {
console.log("It was animated!");
});
I know you can point out what's wrong with my functions.
I resolved the issue by using CSS animation completely. I used translate3D property to do that.
I create jQuery code for listing images every 5 sec - when the focus is on the button which is located on the picture, it must stop changing. I have a problem when my page is lost focus - when I back it dose not work correctly for some time because the coordinates of pictures are not correct!
Here is my SavasSript code:
var displayTimeout = 5000;
var bannerCurrentImgIndex = 0;
var timer;
var link;
function bannerDoWork() {
var bannerImages = $("#myGallery .main_pic");
var bannerImagesCount = bannerImages.length;
if (bannerCurrentImgIndex == bannerImagesCount - 1) {
bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
bannerImages.eq(0).animate({ 'left': '0' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
bannerCurrentImgIndex = 0;
}
else {
bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex + 1).animate({ 'left': '0' }, 'slow');
bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
bannerCurrentImgIndex = bannerCurrentImgIndex + 1;
}
}
$(document).ready(function () {
timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
link = $("#myGallery .main_pic_btn");
link.hover(function () { timer = clearInterval(timer); },
function () {
if (timer == null)
timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
});
});
I find answer! I set animate parameter queue=false - and now it works great!
Example:
firstPic.animate({ left: 0, top: 0 }, { queue: false, duration: "slow" });