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);
});
});

On first click animation works good, on second it skips some steps

For this animation I use velocity.js and here is the code
$(document).ready(function() {
$('.shrink').on('click', function() {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
$('.spread').on('click', function() {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
});
});
and the jsfiddle with full animation preview.
So, when you click on some column it opens and click again it closes. That is how it is supposed to work. But, the problem is if you now click again on the same column, it will open and close immediately, which is not the effect I want.
How can I fix this?
Btw, not sure why, but currently is not working in chrome, but it works in ff.

Learn about event delegation
simple rewrite of your code becomes
$(document).ready(function () {
$('body').on('click', '.spread', function () {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
$('body').on('click', '.shrink', function () {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
});
});
DEMO

jQuery Show hide bugs out

So I can't figure out why my more and less show function is messing with a show hide function. I have included a jsfiddle and a demo. It works one time good then screws up when i try to open it again. Press the top left img a couple time and you will see the issue. The text goes out of the div!
Jsfiddle:http://jsfiddle.net/LLDLT/
DEMO:http://aucblock.x10.mx/eric/edited/
jQuery Code:
$("#e").click(function (e) {
$("#u").hide(200);
$("#n").hide(200);
$("#l").hide(200);
$("#a").hide(200);
$("#m").hide(200);
$(".eew").hide(200);
$("#s").show(200);
$("#re").animate({
"margin-left": "0px"
}, 200);
$("#r").animate({
"margin-left": "0px"
}, 200);
$("#s").animate({
"margin-left": "2px"
}, 200);
$("#u").animate({
"margin-left": "2px"
}, 200);
$("#n").animate({
"margin-left": "2px"
}, 200);
$("#l").animate({
"margin-left": "2px"
}, 200);
$("#a").animate({
"margin-left": "2px"
}, 200);
$("#m").animate({
"margin-left": "2px"
}, 200);
e.stopPropagation();
$('body').on('click', '.highl', function () {
if ($('#s').css('height') === '190px') {
$('#s').animate({
'height': '92px'
}, 200);
$(".highl").text("More");
$(".eew").hide(200);
} else {
$('#s').animate({
'height': '190px'
}, 200);
$(".highl").text("Less");
$(".eew").css("display", "inline");
}
});
$('body').on('click', '.tri', function () {
$('#s').hide(200);
$('.eew').hide();
$('#s').animate({
"height": "92px"
}, 200);
});
});

So if you check out the inspector you will see that the parent div.popu has a definite height set at 92 pixels. The overflow text in the span will always appear outside of the background image in that scenario unless you allow the height to be "auto" or you add overflow:scroll to .popu

$(this) in animate() callback but with setTimeout

jQuery docs explicitly state that
If supplied, the complete callback function is fired once the
animation is complete. This can be useful for stringing different
animations together in sequence. The callback is not sent any
arguments, but this is set to the DOM element being animated.
Hence, this works fine:
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
$(this).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
});
});
$(this)'s next sibling that is a div is first animated in, and then with a callback it is faded out again. However...!
When using a setTimeout in the fallback, this won't work. See this fiddle.
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
setTimeout(function () {
$(this).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
}, 2000);
});
});
I need to use $(this).next() though, because I will be having multiple buttons on the page. How can I keep the delay of 2s but still use the $(this) selector?

For jQuery's animating methods, you can use delay():
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
$(this).delay(2000).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
});
});
JSFiddle
NOTE: The reason that setTimeout() didn't work for you, is because this isn't referring to the element that you think it is, it's referring to the window. To do that, you'll need to first create a reference to this:
JSFiddle

Also a little bit of magic. You can bind "this" to the timeout function.
http://jsfiddle.net/h6E6z/5/
setTimeout(function () {
$(this).fadeOut("slow", function () {
$(this).css({
"top": 0,
"display": "block",
"opacity": 0
});
});
}.bind(this), 2000);

You could always just store $(this) in a variable and use it in the timeout function (I use "$" in front of variables storing a dom element - that is of course totally optional, I just like it that way...):
$("button").click(function () {
$(this).next("div").stop(true, true).animate({
"opacity": 1,
"top": "36px"
}, 600, function () {
var $next_div = $(this);
setTimeout(function () {
$next_div.fadeOut("slow", function () {
$next_div.css({
"top": 0,
"display": "block",
"opacity": 0
});
});
}, 2000);
});
});

Text animation from left and right in continuous loop using jquery

I want to animate text smoothly from left and right in continuous loop can anyone suggest me something here is the fiddle link:
http://jsfiddle.net/yLNGn/3/
$(document).ready(function () {
$('.kp').animate({
left: '10px'
}, 600);
$('.kp').delay(600).animate({
left: '-128px'
}, 600);
$('.rp').delay(2000).animate({
left: '10px'
}, 600);
$('.rp').delay(600).animate({
left: '-108px'
}, 600);
$('.kpp').delay(4000).animate({
left: '10px'
}, 600);
});

See Here is the answer. I make it as the seperate function with fiddle see here.
function repeat() {
$('.kp').animate({
left: '10px'
}, 600);
$('.kp').delay(600).animate({
left: '-128px'
}, 600);
$('.rp').delay(2000).animate({
left: '10px'
}, 600);
$('.rp').delay(600).animate({
left: '-108px'
}, 600);
$('.kpp').delay(4000).animate({
left: '10px'
}, 600);
$('.kpp').delay(600).animate({
left:'-108px'
},600 ,function() {
repeat();
});
}
Fiddle
Hopefully it may helps.

Well, you can use setInterval function, or if you make use of the complete callback of the jquery animate method:
$(document).ready(function () {
console.log('ready');
var james = $('#bond');
var right = function () {
james.animate({left: '100px'}, 600, left);
};
var left = function () {
james.animate({left: '0px'}, 600, right);
};
right();
});
this is the complete fiddle example: http://jsfiddle.net/yLNGn/32/

Have you considered using this jQuery plugin?