Develop Reference

Moving object Left To Right

In my game I am going to add obstaceles that move left to right across the <div id="outline"></div>
I've used setInterval(){...} with the .animate() In it, and it seems to work only issue is after a little bit of time it leaves the ouline, Below is some code and a link.
$(document).ready(function() {
setInterval(function(){
$("#CObject").animate({
'marginLeft' : "+=220px" //moves left
}, 900);
}, 900);
setInterval(function(){
$("#CObject").animate({
'marginLeft' : "-=220px" //moves left
}, 900);
}, 1000);
});
Link.

change to this on your "-=220px":
setInterval(function(){
$("#CObject").animate({
'marginLeft' : "-=220px" //moves left
}, 900);
}, 900);
to match 900 time interval, it's offset by 100.

If you want to know. There's another way do what you want without use setInterval, in this case you have to wait the animation ends in order to start the reverse animation.
$(document).ready(function() {
animate(false);
});
function animate(reverse) {
$("#CObject").animate({
'marginLeft' : (reverse) ? "-=220px" : "+=220px" //moves left
}, 900, function() {
// Run when animation finishes
animate(!reverse);
});
}
This way you can be sure that animation will finish before start anything else

Without setInterval:
$(document).ready(function() {
function loop() {
$("#CObject").animate({
'marginLeft' : "+=220px" //moves left
}, 900, 'linear', function() {
loop();
});
$("#CObject").animate({
'marginLeft' : "-=220px" //moves left
}, 900, 'linear', function() {
loop();
});
}
loop();
});
fiddle
create a loop function with the animation and then just call it when the animation finishes.

To ensure that the animation is complete, I would just have each direction animation call the other one when it completes. If you look at the API for animate, you'll see the fourth parameter is for a function that will be called when the animation is finished. http://api.jquery.com/animate/
$(document).ready(function() {
animateRight();
});
function animateRight() {
$("#CObject").animate({
'marginLeft' : "+=220px" //moves left
}, 900, 'swing', animateLeft);
}
function animateLeft() {
$("#CObject").animate({
'marginLeft' : "-=220px" //moves right
}, 900, 'swing', animateRight);
}
Here is the fiddle: http://jsfiddle.net/cgdtfxxu/

jQuery ScrollTop add to this script

a couple of people kindly helped me yesterday with a jQuery issue on a scrollTop function but I now have another small issue. Below is the fiddle for the js. I need to get the js to bounce the content back to the top instead of scrolling back up to the top.
Here is the JS, fiddle below it.
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: function () {
$(this).animate({
scrollTop: 0
}, {
duration: speed,
easing: 'linear', // <--- here
complete: speed
});
}
});
}
speed = 8000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
fiddle
I need the speed to remain as linear but the scroll to reset to the top once it gets to the bottom. Any help would be amazing! Thanks in advance people :)

Here is an updated fiddle: http://jsfiddle.net/tsb5pj49/4/
Instead of animating it back to the top, you can just set the scrollTop to 0 using the same function. Additionally, if you store the setInterval in a variable then you can clear it and start it again when the animation completes and the scrollTop is reset. Like so:
// When DOM is fully loaded
jQuery(document).ready(function ($) {
var speed = 8000,
scrollInterval;
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: onScrollingComplete
});
}
function startScrolling() {
scroll( speed );
scrollInterval = setInterval(function () {
scroll(speed)
}, speed * 2);
}
function onScrollingComplete() {
$( this ).scrollTop( 0 );
clearInterval( scrollInterval );
startScrolling();
}
startScrolling();
});
Hope this helps

jquery slide animations going out of sync

I currently have a carousel slider which contains some text. When the user clicks the 'next' button the .carousel-text div sides up hiding the text, the carousel moves to the next slide then the .carousel-text on the next slide slides down to reveal the text.
This works fine some of the time but sometimes it will go wrong and the text will slide up and down before the carousel moves on. I'm assuming this is because the next button is clicked before the whole sequence has finished (the whole thing takes 2 seconds). Is there a way to make sure the whole thing is complete before it is called again?
jQuery("#arrow-right").click(function () {
jQuery('.carousel-text').animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
}
EDIT: Just made a jsfiddle here: http://jsfiddle.net/UGE44/

Place a ".stop(true, true)" before you animate. This will stop the previous animations and allow the new ones to start all at the same time. Would look something like this:
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').stop(true, true).animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
Your may want to play around with which animates you place them before, as it may not need to be in all three spots.

Set "animating" flag before animate and clear it when animation is done.
jQuery("#arrow-right").click(function () {
var $text = jQuery('.carousel-text');
if ($text.data('animating') !== true) {
$text.data('animating', true)
.animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
$text.data('animating', false);
// Animation complete.
});
});
});
}
}

interrupt fadeTo function

Is there a way to interrupt the fadeTo animation on mouseover? For example: In the below code when someone hovers OFF "slider$controls" they fade to .1 opacity at 1750ms, but when you hover ON them they fade to 1 opacity at 500ms. If someone were to hover OFF of them and before the 1750ms was up they hovered back on them, slider$controls would not fade back to 1 opacity until the 1750ms was up which makes it appear unresponsive.
$(function () {
var fadeDelay = 4000,
// hide after 3 second delay
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.hover(function () {
$(this).fadeTo(500, 1.0);
}, function () {
$(this).fadeTo(1750, 0.1);
});
}, fadeDelay);
};
});

You need to use jQuery's .stop function:
$(function () {
var fadeDelay = 4000,
// hide after 3 second delay
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.hover(function () {
$(this).stop(1,1).fadeTo(500, 1.0);
}, function () {
$(this).stop(1,1).fadeTo(1750, 0.1);
});
}, fadeDelay);
};
});
What this does is stops the current animations, and jumps to the final result before starting the next animation.

You can use .stop() to clear animations from the queue/stop the current animation.
Best use it like this:
$(function () {
var fadeDelay = 4000,
// hide after 3 second delay
timer, hideControls = function (slider) {
clearTimeout(timer);
setTimeout(function () {
slider.$controls.hover(function () {
$(this).stop(true,false).fadeTo(500, 1.0);
}, function () {
$(this).stop(true,false).fadeTo(1750, 0.1);
});
}, fadeDelay);
};
});
This will clear the queue, so all animations are stopped and then start the animation from where the element has been stopped.

If you call the stop method on the element it will stop all animations.

.hover( function() {
$( this ).stop().fadeTo( 500, 1.0 );
}, function() {
$( this ).stop().fadeTo( 1750, 0.1 );
});

Animate an Image after hovering an item a second

after some tries to get this to work, i ask you, if you know where my mistake is.
This is my code until now:
$(".menu a").hover( function () {
$(this).data('timeout', setTimeout( function () {
$(this).hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
i would be happy about some help.
I tried this but it doesn't work. one more information perhaps it will make it more clear. i had the function like this before:
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
it worked but so it will be viewed imidiately. so i found this to set a timer that it show the popup only after in this example one second:
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
both worked it self but if i put them together it does nothing

Inside the setTimeout callback, this does not refer to the hovered element.
To fix this, you need to make a separate variable in the event handler, like this: (pun intended)
$(".menu a").hover( function () {
var me = $(this);
me.data('timeout', setTimeout( function () {
me.hover(function() {
me.next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
You don't need to use me inside the inner hover handlers, but you might as well.

Theres a nice plugin that does this: hoverIntent. Replace .hover with .hoverIntent, and you wont have to deal with setting and clearing the timeout manually.