Develop Reference

Set time for applying css in jquery

This is my js code. Actually I want to set time to apply this css. I tried using setTimeout but not working. How to do using setTimeout or anything else. Please help. Thank you
$(document).ready(function() {
$(".front").click(function() {
$(".flip-container").css({
"height": "0px"
});
});
});

Use setTimeout() as follows
$(document).ready(function() {
$(".front").click(function() {
setTimeout(function() {
$(".flip-container").css({
"height": "0px"
});
}, 1000);
});
});
you can also do it with some animation using animate() method
$(document).ready(function() {
$(".front").click(function() {
$(".flip-container").animate({
"height": "0px"
}, 1000);
});
});

Jquery .animate() for scrolling left and right not working in Firefox but fine in Chrome

The following jquery doesn't work in firefox but works perfectly in chrome. See here for fiddle example. Any ideas?
$('#next').click(function() {
event.preventDefault();
$('#imageSlider').animate({
marginLeft: "-=200px"
}, "fast");
});
$('#prev').click(function() {
event.preventDefault();
$('#imageSlider').animate({
marginLeft: "+=200px"
}, "fast");
});

You don't need to remove event.preventDefault(). You are getting an error in Firefox:
event is not defined
because you are not passing event as a parameter to your callback function. Chrome is just being fault tolerant by not stopping JavaScript execution.
Code should be like this:
$('#next').click(function(event) { // Notice how I passed event as a parameter
event.preventDefault();
$('#imageSlider').animate({
marginLeft: "-=200px"
}, "fast");
});

Try removing
event.preventDefault();

Just remove the event.preventDefault();

Remove event.preventDefault(); and thus it will work.
Here's the updated code:
$('#next').click(function() {
$('#imageSlider').animate({
marginLeft: "-=200px"
}, "fast");
});
$('#prev').click(function() {
$('#imageSlider').animate({
marginLeft: "+=200px"
}, "fast");
});

how to animate height of a div back-jquery

I'm trying to show some part of a div and animate it to 100% when the div is clicked.
and I want to animate it back to the initial height of the div if it's clicked again.
this is what i have so far,but it doesn't work. can anyone help?
#mydiv {
height:150px;
width: 100%;
overflow:hidden;
}
<script type="text/javascript">
$(document).ready(function(){
$("#mydiv").click(function(){
$(this).animate({height: '100%'}, 300);
}, function() {
$(this).animate({height: '150px'}, 300);
});
});
</script>

click() doesn't accept two function arguments, previously there was a toggle() function that performed how you need it but it has now been deprecated and removed from jQuery.
Since your use case is pretty simple, I believe something like this would be enough:
$("#mydiv").click(function () {
var $this = $(this);
$this.animate({
height: $this.height() == 150 ? '100%' : 150
}, 300);
});
Demo fiddle

This should do the job for you.
jQuery:
$(document).ready(function() {
$("#mydiv").toggle(
function() {
$(this).animate({height: '100%'}, 300);
};
function() {
$(this).animate({height: 150}, 300);
});
});

Increment background-position-x using jQuery animate?

Is it possible to animate a DIVs background-position-x using jQuery animate?
Ideally, the background-position-x will increment 20% when clicked.
Here is my code so far:
$('.cycle').click(function() {
$(this).animate({ 'background-position-x': '+20%' }, 500, 'linear');
});
But it only works for the first click.
Thanks!

Try this
$('.cycle').on('click', function() {
$(this).animate({ 'background-position-x': '+=20%' }, 500, 'linear');
});

use something like this:
$(function() {
$('.element').css("backgroundPosition","0px 0px").animate({"backgroundPosition":"-200px 10px"});
});

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.