Develop Reference

jQuery animate back when clicked anywhere on the page

<script type="text/javascript">
$(function (){
$(".links").click(function(){
$('.slider').stop(true,false).animate({right: "0" }, 800, 'easeOutQuint' ); },
function(){
$(".slider").stop(true,false).animate({right: "-200" }, 800, 'easeInQuint' ); },1000);
});
</script>
I am building a little slider on my website. The slider position is right: -200. It slides to position right:0 I want to animate it back to position right: -200 after clicking anywhere else on the page.
I tried all the ways which failed. toggle(slide) works good but doesn't looks good.

well, here you go
$(document).click(function(e){
e.preventDefault();
if($(e.target).closest("your_slider_selector").length) return;
//here you can do what you want
});

Bind click on all document, stop current animation, run new animation.
$(document).click(function () {
$('.slider').stop(true).animate({right: -200}, 500);
});

Store the CSS value in a variable before you animate the slider:
var right = $('.slider').css("right");
And then you can just use the variable:
$('.slider').stop(true).animate({right: right}, 800);
Here an example: http://jsfiddle.net/ctdjkrLx/2/

Delaying jQuery toggleClass effect until a slide animation has finished

I'm having some issues with the jQuery delay() function.
I'm currently using it to try and force a toggleClass action to wait until the slideUp animation has completed on one of my divs however it doesn't appear to be working.
My style aims at having a bar with rounded corners that when clicked expands to reveal further content with the round corners of the bar at bottom becoming squared so as to look as though the bar has actually expanded to reveal the content. This is fine and it works however, when I collapse the expansion, the bar needs to go back to having rounded corners at the bottom after the collapse animation has completed. At the moment it seems to fire before this animation has completed.
I read somewhere online that the jQuery 'slow' speed of transition is 600 milliseconds to I set the delay to 800 to make sure it is out of the way but again this hasn't actually done anything.
Any suggestions? Code and fiddle below:
$(function() {
$('span.history_record_toggle').click(function () {
if($(this).hasClass('collapsed')){
$(this).text('Show +');
$(this).toggleClass('collapsed');
$(this)
.closest('.history_record_container')
.find('.history_record_body')
.slideUp('slow',function() {
});
$(this)
.parent()
.toggleClass('squared_bottom');
}else{
$(this).text('Hide -');
$(this).toggleClass('collapsed');
$(this)
.closest('.history_record_container')
.find('.history_record_body')
.slideDown('slow',function() {
});
$(this)
.parent()
.delay(800)
.toggleClass('squared_bottom');
};
});
});
http://jsfiddle.net/jezzipin/KFeHd/6/

jQuery animations and effects have callback functions for what you want to happen after it finishes.
E.g.
var thisParent = $(this).parent();
$(this).closest('.history_record_container').find('.history_record_body').slideDown('slow',function() {
$(thisParent).toggleClass('squared_bottom');
});

Try this: Fiddle here
$(function() {
$('span.history_record_toggle').click(function () {
$zis = $(this);
if($zis.hasClass('collapsed')){
$zis.text('Show +')
.removeClass('collapsed')
.closest('.history_record_container')
.find('.history_record_body')
.slideUp('slow',function() {
$zis.parent().removeClass('squared_bottom');
});
$zis.parent().addClass('squared_bottom');
}else{
$zis.text('Hide -')
.addClass('collapsed')
.closest('.history_record_container')
.find('.history_record_body')
.slideDown('slow',function() {
});
$zis.parent().addClass('squared_bottom');
};
});
});

Jquery Image Slide Up After Page Load

Pls I am working on a website. I want a situation on the home page where an image of a man standing will slide up 1 or 2 seconds after the whole page has loaded. I need someone to help me with a codepen example.
Below is the code I inserted in the head section. I set the image to display:none in css, but when I refresh, I found out it's not working. #man is the id of the image.
Thank u.
$(function() {
$("#man").one('load', function () {
$(this).show("slide", { direction: "up" }, 2000);
}).each(function() {
if(this.complete)
$(this).load();
});
});

You can try this -
$(window).load(function(){
$("#man").show("slide", {
direction: "up"
}, 2000);
});
Demo --> http://jsfiddle.net/CqR9E/2/

Not sure if you need all that...the below code will slide up after a 2000 ms delay:
slideTimer = setInterval(function() {
$('#man').slideUp();
}, 2000);
Demo: http://jsfiddle.net/tymeJV/VBtUU/

menu should hide when not being hovered over with timeout

What I am trying to accomplish is having a menu that will show up when a "button" is clicked (the button and menu are in separate elements so the mouse is not hovering over the menu initially).
The menu should hide itself if it is not hovered over within the duration of the timeout (currently it does this, but only the first time it is clicked).
Also, if the element gets hovered over, I would like hide on mouseout and clear the timer and clicking the button again would reset the timeout (it is not resetting maybe?).
I have tried several incarnations and nothing I have tried has behaved correctly and am looking for advice. This his is what I am currently using:
var mytimer = window.setTimeout(function() {$('.menu-div').slideUp(function() {
window.clearTimeout(this.mytimer);
})
}, 5000);
$().ready(function(){
$('#menu-button').click(function () {
$('.menu-div').slideDown();
$(mytimer);
});
$('.menu-div').mouseenter(function() {
window.clearTimeout(this.mytimer);
});
$('.menu-div').mouseout(function() {
$('.menu-div').slideUp(200);
});
});

I think you want something like this (just a guess, because you didn't give any HTML)
$(function(){
var mytimer=0;
$('#menu-button').click(function () {
$('.menu-div').slideDown();
mytimer = setTimeout(function(){
$('.menu-div').slideUp();
}, 5000);
});
$('.menu-div').mouseenter(function() {
clearTimeout(mytimer);
});
$('.menu-div').mouseleave(function() {
$('.menu-div').slideUp();
});
});
DEMO.

Adding delay to mouse out function

I have one drop down menu,
<ul>
<li><a>link 1</a>
<ul><li><a>link 1</a></li></ul>
</li>
</ul>
I am using the following JS to use hover and show child menus.
I want to add delay to the mouse out function (when the class of the LI removed) about 500ms,
$('li').hover(function(){
$(this).addClass('over');
}, function(){
$(this).removeClass('over');
});
Please do needful in this.
thanks in advance

You can do something like this:
$('li').hover(function(){
var timer = $(this).data('timer');
if(timer) clearTimeout(timer);
$(this).addClass('over');
}, function(){
var li = $(this);
li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500));
});
This clears any timeout when hovering over it (in case you hover, leave, hover back you need to check this) and sets a 500ms delay when leaving the hover, storing the timeout ID on the li itself using .data().

$('li').hover(function(){
$(this).addClass('over');
}, function(){
setTimeout(function(){$(this).removeClass('over')}, 500);
});