We Keep Coding

Multi-element jQuery animation issue

I am trying to loop through an animation selecting multiple elements and moving them as long as the mouse hovers over the parent area. This works well enough, but each time the animation loops through the first element (child) moves faster than the others. ??? JSFiddle Example
HTML:
<div id="menuContent">
<button id="btn1" class="mainButton" left="0"/>
<button id="btn2" class="mainButton" left="0"/>
<button id="btn3" class="mainButton" left="0"/>
</div>
jQuery:
$("#menuContent").hover(function () {
loop();
}
, function () {
stop();
}
);
function stop() {
$(".mainButton").stop();
}
function loop() {
$(".mainButton").stop().animate({ left: "+=20"}, 100, 'linear', function () { loop(); });
}

From the documentation:
complete
A function to call once the animation is complete, called once per matched element.
When you call animate it starts 3 animations. Animation for the first element gets started and finished first. And then its complete gets called and you stop and start all animations, though some of them didn't get completed yet.
Consider this example (Fiddle):
function loop() {
$('.mainButton').stop().animate({
left: '+=1'
}, 1, 'linear', function() {
loop();
});
}
Only one circle will be moving because there is no time gap for others to move.
You can use promises to make it work (Fiddle):
$('#menuContent').hover(function() {
$('.mainButton').data('run', true);
loop();
}, function() {
$('.mainButton').data('run', false);
});
function loop() {
if (!$('.mainButton').data('run')) return;
$('.mainButton').animate({left: '+=10'}, 100, 'linear').promise().done(loop);
}

Danil Speransky is correct. However there is an options argument to the animate function to allow animations to not run in a rigid queue.
`$(".mainButton").animate({ left: "+=20"},{queue: false}, 100, 'linear', function () { loop();});`
Check out the documentation for queue:false here.

You're mileage may vary, but doing these two things seem to help a lot:
First, store the jQuery object for the .mainButton elements:
var $mainButton = $('.mainButton')
Second, Make the left increment more and also increase the delay:
$mainButton.stop().animate(
{ left: "+=1000"},
5000,
'linear',
function() { loop() })
You can toy with the numbers more to see if you get even better performance.
https://jsfiddle.net/wotfLyuo/8/

Your complete handler is called, if the animation for one elements in the jquery collection is finished. So when the first element is finished, you call loop and stop the animation of the other elements. Better use promise and done and save the state of your animation within the collection:
$("#menuContent").hover(function () {
start();
}, function () {
stop();
});
function start() {
$(".mainButton").data('stopped', false);
loop();
}
function stop() {
$(".mainButton").data('stopped', true).stop();
}
function loop() {
var $mainButtons = $(".mainButton").stop();
if(!$mainButtons.data('stopped'))
$mainButtons.animate({ left: "+=20"}, 100, 'linear').promise().done(loop);
}
Here is a working fiddle (https://jsfiddle.net/wotfLyuo/5/)

jQuery or JavaScript code for restarting a specific jQuery countdown timer plugin

I am basically using this particular jQuery plugin for countdown timer:
https://github.com/sygmaa/CircularCountDownJs
My Fiddle: https://jsfiddle.net/sygmaa/3gq88aL2/
(both are almost same)
$(document).ready(function() {
$('button').click(function() {
// Run the countdown
$('.timer').circularCountDown({
delayToFadeIn: 500,
reverseLoading: false,
duration: {
seconds: parseInt($('.delay').val())
},
beforeStart: function() {
$('.launcher').hide();
},
end: function(countdown) {
countdown.destroy();
$('.launcher').show();
//alert('terminé');
}
});
});
});
My question is, how can I make a separate new button, which will restart the countdown timer when it is clicked.
So suppose, the countdown starts from 20..19..18...so on till 1...
And at the moment it is at 9.
If I click my new button, it should make the timer start again from 20..19..18 so on.
How can I do this.
I have tried tweaking the code with all my ability, but in vain.
I dont know, somehow..some object is not destroyed and interferes in the restarting when I create a new object to restart.
I'm just fed up and really confused.
If anyone could please help..I would be really grateful.

This modification sort of works. I am not familiar with all the ins and outs of creating or destroying the circularCountDown, but this does successfully start a new timer when you click on the timer:
$(document).ready(function() {
$('button').click(function() {
runTimer();
});
$('.timer').click(function(){
runTimer();
});
});
function runTimer(){
// Run the countdown
$('.timer').circularCountDown({
delayToFadeIn: 500,
reverseLoading: false,
duration: {
seconds: parseInt($('.delay').val())
},
beforeStart: function() {
$('.launcher').hide();
},
end: function(countdown) {
countdown.destroy();
$('.launcher').show();
//alert('terminé');
}
});
}

Automatically move div with javascript on delay

I have the below piece of code that moves a onto the screen when ?added is in the URL which works great. I now need to add a piece of code to it that then moves the back over after 5 seconds. I have noticed there's a delay function but I'm not sure how to add it into the code. Can anyone help? Many thanks!
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
$('#popout-left-menu-container')
.animate({
'right': '2px'
}, 300);
};
});

You can use the setTimeout function to delay something in javascript. Maybe like this:
$('#popout-left-menu-container').animate({'right':'2px'},300);
setTimeout(function(){
//This is animation that runs after 5 seconds. You can use it to move the block back.
//You have to set your parameters yourself here
$('#popout-left-menu-container').animate({'right':'0px'},300);
}, 5000);

$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
setTimeout(function(){
$('#popout-left-menu-container')
.animate({
right:'2px'
},300);
},5000);
};
});

You should do it with .delay().
$("query").animate(firstAnimation, firstDuration).delay(milliseconds).animate(secondAnimation, secondDuration);

How to continuously bounce an object when site is live

I am new to JavaScript and jQuery. I have trouble in my new project. I want to need a image is bouncing. I got a script from net. But This function is only for jumping on the click.I want its jumping when the site is loaded. Please help me.
Link http://www.tycoonlabs.com/help/bouncing%20-%20Copy.html
This is my script
<SCRIPT>
$(function(){
$('#bouncy1').click(function () {
$(this).effect("bounce", { times:5 }, 300);
});
});
</SCRIPT>
Thanks and Regards

If you want to have it bounce while something is happening and then stop it, you could use setInterval
var interval = setInterval(function(){
jQuery('#someId').effect('bounce', {times: 5}, 300);
}, 500); // every half second
// Do some stuff to load up your site;
clearInterval(interval); // Stop the bounce interval
You may want to adjust the times parameter and the delay to meet your needs and effect.

Try this:
<script>
$(function(){
function bounceObject(obj)
{
obj.effect("bounce", { times:5 }, 300);
}
bounceObject($('#bouncy1'));
$('#bouncy1').click(function () {
bounceObject($(this));
});
});
</script>

this works well
function bounce(){
$('#test').effect( "bounce", "slow", bounce);
}
bounce();
http://jsfiddle.net/xGe2D/

add autoplay to basic jquery slider

Im making a basic jQuery slider for class. and would like to have it autoplay playing the next slide after 5 seconds but haven't used the timer before it isn't doing what I thought it should do. It waits for the proper interval and then keeps triggering the callback function.
//basic slider on click
$('.slider>ul>li').click(function()
{
$('.slider>ul>li').removeClass('current');
$(this).toggleClass('current');
right=$(this).index()*745;
$(this).parent('ul').parent('.slider').children('div').children('ul').animate({'right': right}, 1000, 'easeOutBack');
})
//attempt to use timer plugin to auto play
$('.slider>ul>li').timer(
{
delay: 1000,
callback: function()
{alert($('.slider>ul>li.current').index())
if($('.slider>ul>li.current').index()!=3)
{
$('.slider>ul>li.current').next('li').click();
}else//oddly this doesn't trigger at all
{
$('.slider>ul').first().click();
}
}
})

Try this:
setInterval(function(){
var i = $('.slider>ul>li.current').index();
var next = (i < 3 ? i+1 : 0);
var items = $('.slider>ul>li');
$(items[next]).click();
}, 5000);
EDIT:
changed setTimeout to setInterval and bumped time to 5sec; this should now loop.