We Keep Coding

Hover to move slider left and right

$('#next').hover(function () {
$('#sliderWrapper').animate({
scrollLeft: "+=200px"
}, "fast");
});
$('#prev').hover(function () {
$('#sliderWrapper').animate({
scrollLeft: "-=200px"
}, "fast");
});
See fiddle. I'm trying to get the scrolling to be continuous while hovering .hover() function isn't working properly or as I thought it would.

maybe this help you
DEMO
function loopNext(){
$('#sliderWrapper').stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopNext);
}
function loopPrev(){
$('#sliderWrapper').stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopPrev);
}
function stop(){
$('#sliderWrapper').stop();
}
$('#next').hover(function () {
loopNext();
},function () {
stop();
});
$('#prev').hover(function () {
loopPrev();
},function () {
stop();
});
Source: Continuous scroll on hover [performance]

Try this jsFiddle
This will, on the next hover, start animating towards the width of the containing div. When you mouse out, it will stop. On the prev hover will start animating to 0 and when you mouse out it will stop.
$('#next').hover(function () {
$('#sliderWrapper').animate({scrollLeft: $(this).siblings("#sliderWrapper").width()}, 5000);
}, function() {
$('#sliderWrapper').stop();
});
$('#prev').hover(function () {
$('#sliderWrapper').animate({scrollLeft: 0 }, 5000);
}, function() {
$('#sliderWrapper').stop();
});

I would suggest using the mouse over and out events. When the mouse goes over start animating and when the mouse goes out stop animating.

Most efficient way to detect collision of two divs

I'm using Jquery Collision to detect two objects overlapping each other. Here is a JSFiddle of the problem.
(apologies for including jquery collision script in HTML, couldn't find other way)
Click anywhere in the gray container to move the green div over the white div.
HTML Structure:
<div class="container">
<div class="test"></div>
<div class="menu"></div>
</div>
JS:
$(document).ready(function () {
var hit_list;
$(".container").click(function () {
$(".menu").stop().animate({
left: "+=100px"
}, 300, function () {
$(".menu").animate({
left: "0"
}, 800);
});
//Test for collision
hit_list = $(".menu").collision(".test");
if (hit_list.length != 0) {
alert("welcome Earthling!");
}
});
});
The problem with my method is that, it doesn't detect collision every time. Even though it passes over the white division fine, the alert isn't displayed everytime.
Am I going wrong anywhere in checking for collision? Is there a better/more efficient method to detect collisions during animation ?

jQuery animate has a step callback (https://api.jquery.com/animate/), it gets executed after each step of the animation.
Use it like this:
$(document).ready(function () {
var hit_list;
$(".container").click(function () {
$(".menu").stop().animate({
left: "+=100px"
}, {
duration: 300,
complete: function () {
$(".menu").animate({
left: "0"
}, 800);
},
step: function(){
//Test for collision
hit_list = $(".menu").collision(".test");
if (hit_list.length != 0) {
alert("welcome Earthling!");
}
}
});
});
});

Try this http://jsfiddle.net/aamir/y7PEp/6/
$(document).ready(function () {
var hit_list;
var hits=0;
$(".container").click(function () {
var $this = $(this);
function checkCollision() {
//Test for collision
hit_list = $(".menu").collision(".test");
if (hit_list.length != 0) {
hits++;
$(".menu").html(hits+ ' hits');
}
}
$(".menu").stop().animate({
left: "100px"
}, 300, function () {
checkCollision();
$(".menu").animate({
left: "0"
}, 800);
});
});
});

I want to move button left-right and right-left using jquery

I am able to move button to left side but after that how i can again move it to right side.
Can i also use delay here.
Here is the code that i have tried:
$(document).ready(function () {
example_animate(10);
});
function example_animate(px) {
$('#Button1').animate({
'marginLeft': px
});
}

you can use this, it is working perfectly for me, it will continuously move your element back and forth, and you can also vary animation speed.
function animatethis(targetElement, speed) {
$(targetElement).animate({ marginLeft: "+=10px" },
{
duration: speed,
complete: function () {
targetElement.animate({ marginLeft: "-=10px" },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
)};
}
use this to implement:
animatethis($('#controlid'), 1500);

Cannot answer properly without looking at your HTML and CSS but what you are doing is right. Simply call your example_animate() with a negative value
i.e.
example_animate(-10);
Or if you want to bring it to the original value (assuming originally it had 0 margin)
example_animate(0);
Note: This is probably not the best way to animate

Yes, the animate function takes a function that is called after the animation is complete. So you can do:
$(document).ready(function () {
example_animate(100);
});
function example_animate(px) {
$('#Button1').animate({
'marginLeft': px
}, function(){
$('#Button1').animate({
'marginLeft': 1
});
});
}
http://jsbin.com/ixajol/1/edit

Do execly the same only to the right, Its not that hard if you can make it go left.

Maybe
var button_init_marginLeft;
$(document).ready(function () {
button_init_marginLeft = $('#Button1').css("marginLeft");
example_animate(10, true);
example_animate(null, false);
});
function example_animate(px, to_left) {
if (to_left)
{
$('#Button1').animate({
'marginLeft': px
});
}
else
{
$('#Button1').animate({
'marginLeft': button_init_marginLeft
});
}
}
?

How to use .animate() in jquery

Hope you could check my code. Just want to animate. Toggle the top position of div tag with 'accordionHeader' class.
<script type="text/javascript">
$(document).ready(function() {
$(".accordionHeader").toggle(function() {
$(".accordionHeader").animate({"top": "0 144px"}, 500);
function(){
$(".accordionHeader").animate({"top": "144px 0"}, 500);
);
});
</script>
Thank you so much.

you mean:
$(document).ready(function(){
$(".accordionHeader").toggle(
function(){
$(".accordionHeader").animate({"top": "144px"}, 500);
},
function() {
$(".accordionHeader").animate({"top": "-144px"}, 500);
});
});
As an alternative, since jQuery.toggle() is deprecated, you could also do:
$(".accordionHeader").on("click", function() {
var clicked = $(this).data('clicked');
if (clicked) {
$(".accordionHeader").animate({"top": "144px"}, 500);
}
else {
$(".accordionHeader").animate({"top": "-144px"}, 500);
}
$(this).data("clicked", !clicked);
});

you can try this on click event
$('.accordionHeader').animate({ position: 'relative', top: '144px' }, 500);

Halting fade animation when clicking a new element

I have an animation that causes boxes to appear in sequence when clicking a link. I'm finding that the animation does not stop when clicking a new link and will often cause the it to appear out of sequence. You can see this here when clicking between guests rapidly. I thought something like $.animation.stop() would solve the issue but it hasn't. Any help would be appreciated.
var stepFade = function() {
if ($($this).data("known1") === undefined || null) {
$('.guest-data .known-for').css('display', 'none');
} else {
$('.guest-data .known-for').css('display', 'block');
$('.guest-data .known-for li').eq(0).delay(200).fadeIn( 300);
$('.guest-data .known-for li').eq(1).delay(300).fadeIn( 300);
$('.guest-data .known-for li').eq(2).delay(400).fadeIn( 300, function() { animating = false; });
}
}
//Fade guest
if (!featured) {
featured = true;
getData();
$('.featured').fadeOut( 500, function () {
$('.selected').animate({ opacity: 'toggle'}, 500, function() {
stepFade();
});
})
} else {
$('.selected, .guest-data .known-for, .guest-data .known-for li').fadeOut( 500, function () {
getData();
$('.selected').fadeIn( 500, function() {
stepFade();
});
});
}

Have you tried setting the queue option of .animate() to false?
This way, the animation won't be queued and will begin immediately:
$('.selected')
.animate({opacity: 'toggle'},
{duration: 500, queue: false,
complete: function() { stepFade(); }
});
...OR you could call .stop() right before you call .animate():
$('.selected')
.stop(true, false) //clear the queue and don't jump to the end
.animate({opacity: 'toggle'}, 500, function() {
stepFade();
});