We Keep Coding

Functionality breaks when using toggle with 'slow' option

The problem is that when i use the toggle function without any options i.e default options the 'is(':visible')' on the item returns me the correct state.
However when i use toggle("slow"), it reveals incorrect state and always shows the item operated upon by the toggle as visible false. Of course i am checking that inside the callback function so as to be sure that the animation is complete.
please look at the below code
jQuery(document).ready(function () {
var h3 = jQuery("#myAccordion").find('h3');
jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon");
jQuery.each(h3, function () {
jQuery(this).bind('click', function () {
jQuery(this).next('div').toggle("slow", "swing", callback);
});
});
});
function callback () {
if (jQuery(this).next('div').is(':visible')) {
alert('visible--' + jQuery(this).next('div').is(':visible'));
jQuery(this).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
}
else {
alert('visible--' + jQuery(this).next('div').is(':visible')); // always goes into this 'else' even though the item is visible.
jQuery(this).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
}
}
However the same works perfectly fine when not using the "slow" option with toggle.
Update 2:
Check this out here http://jsfiddle.net/tariquasar/7xt7D/2/
Any pointers...
Update 1: This is the fiddle http://jsfiddle.net/tariquasar/7xt7D/

The context this is not extended to the callback function too. You could try doing this. I have updated the jsfiddle (click here). Ill paste the same here.
jQuery(document).ready(function () {
var h3 = jQuery("#myAccordion").find('h3');
jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon"); // first the item is visible
jQuery.each(h3, function () {
jQuery(this).bind('click', function () {
console.log(this);
jQuery(this).next('div').toggle("slow","swing",callback(this));
});
});
});
function callback (that) {
setTimeout( function () {
console.log(jQuery(that).next('div').is(':visible'));
if (jQuery(that).next('div').is(':visible')) {
alert('visible--' + jQuery(that).next('div').is(':visible'));
jQuery(that).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
}
else {
alert('visible--' + jQuery(that).next('div').is(':visible'));
jQuery(that).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
}
}, 1000);
}
I have added a SetTimeout to get the result you wanted. The callback function is called after the animation completes. Yes. But not after the CSS changes to display:none. CSS change happens a few millisecs later.
However the same works perfectly fine when not using the "slow" option with toggle.
I'm not really sure about how you got it working with options other than slow

Callbacks running twice after AJAX content loaded

I have a page loading content with the waypoints infinite scroller plugin.
On the success of the AJAX call and after DOM elements are added, a callback runs to re-initilize javascript functionality, like carousels, buttons and other animation.
On the first AJAX call, buttons tasked with toggling work properly. On the next AJAX call, the new DOM items work, but the previous buttons now execute toggles twice when clicked. On the third call, original items now run three times, the second items twice and the new ones once, so on and so fourth, continuing to compound as AJAX content is called.
How can I isolate the callback to not affect the previously loaded content, or, is there a way to set a global state for the JS, so that I don't need the callback each time?
Some pseudo code:
$('.infinite-container').waypoint('infinite', {
onAfterPageLoad: function() {
//Carousel options
$('.carousel-container').carousel({
options: here,
....
});
//Button Toggles
$('.button').click(function(){
var self = $(this);
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// Callback after animate() completes.
if(self.text() == 'Hide Details'){
self.text('Show Details');
} else {
self.text('Hide Details');
}
});
});
}
});
Edit: Thanks everybody. All the answers lead me to differing but appropriate solutions. The selected was picked as it's a great collection of all the suggested issues and worth the read.

Check out this answer. I think it is the same situation you are having and has a solution:
Best way to remove an event handler in jQuery?

You are attaching a new click handler each time that block of code gets executed. The result is multiple click handlers being bound to your button. Use jQuery's unbind: http://api.jquery.com/unbind/ to remove any click handler(s) before adding a new one:
$('.infinite-container').waypoint('infinite', {
onAfterPageLoad: function() {
//Carousel options
$('.carousel-container').carousel({
options: here,
....
});
// Un-bind click handler(s)
$('.button').unbind('click');
//Button Toggles
$('.button').click(function(){
var self = $(this);
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// Callback after animate() completes.
if(self.text() == 'Hide Details'){
self.text('Show Details');
} else {
self.text('Hide Details');
}
});
});
}
});

Try bind only once click event to button. Of course you can use on instead of live.
$('.button').live('click', function(){
var self = $(this);
$(this).siblings('.caption').animate({
height: 'toggle'
}, 200, function() {
// Callback after animate() completes.
if(self.text() == 'Hide Details'){
self.text('Show Details');
} else {
self.text('Hide Details');
}
});
});
$('.infinite-container').waypoint('infinite', {
onAfterPageLoad: function() {
//Carousel options
$('.carousel-container').carousel({
options: here,
....
});
//Button Toggles
}
});

$('.button').click(function(){
You add an event handler to every button that has the class button. When the second button is added then you add it to every ... which means button 1 and button 2. And so on.
Try
$('.button').last().click(function(){

Automate Exploding Text Jquery Jsfiddle

http://jsfiddle.net/doktormolle/dNXVx/
How can I make this animate automatically?
I'm new to all this so any help is much appreciated!
function fx(o)
{
var $o=$(o);
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('position','relative');
$('span',$o).stop().css({position:'relative',
opacity:0,
fontSize:84,
top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
}).animate({opacity:1,fontSize:12,top:0,left:0},1000);
}​

I think you want the animate function to be called without click.. if that is the case you can call the function directly or use a timer for an effect. See below,
Change the span like below,
<span id="animateMe">click here</span>
And this script below the fx inside document ready,
Direct Call:
$(function() {
fx('#animateMe');
});
Timer (after 2 secs)
$(function() {
setTimeout(function () {
fx('#animateMe');
}, 2000); //2000 milli seconds = 2 secs
});
http://jsfiddle.net/dNXVx/483/

How to put a delay in loading of images in the same area to make it look like an animation?

Basically I have like 2 images, and I want to show one for 3 seconds, then replace it with another, in the same img tag.
This is what I have so far:
$(function(){
$("#image_area").hide();
$('#W40').click(function(){
$("#image_area img").remove();
show_image_area('40');
});
});
So the flow is first hide the #image_area, then when #W40 button is clicked, remove any current image in the area and run the show_image_area function, the function is as follows:
function show_image_area(world){
if (!$("#image_area img").length) { //only run if no current image exists
$('#image_area').show();
$('#image_area').prepend("<img id='tw_image' src='world+"/7.png' width=\"1000\" height=\"1030\" />");
setTimeout($("#tw_image").attr("src", "world+"/8.png"), 3000);
}
}
Right now, if I run these code, the 8.png shows almost immediately, and there are no 3 second delay that I wanted.

You have an extra " in the code: should be $("#tw_image").attr("src", world+"/8.png").
Also, I would put $("#tw_image").attr("src", world+"/8.png") in a function of it's own.
function SwapImage(world)
{
$("#tw_image").attr("src", world+"/8.png");
}
Then change your last line to setTimeout(SwapImage(world), 3000);

This isnt fully tested but gives you an idea:
$(function(){
$("#image_area").hide();
$('#W40').click(function(){
$("#image_area img").remove()
show_image_area('40');
});
});
function show_image_area(world){
var newImg = $('<img />').css({width: 1000, height: 1030}).attr({id: 'tw_image', src: world+'/7.png');
if ( !$("#image_area img").length ) { //only run if no current image exists
$('#image_area').prepend(newImg).show('fast');
setTimeout( function() {
$("#tw_image").attr("src", world+"/8.png");
}, 3000);
}
}
Basically yours was immediately firing the setTimeout function instead of passing in a function to be fired later

That's because the first parameter of setTimeout is not a function.
Also there is an extra quote on that line.
Also, the "world" variable might need closure (can't remember).
Try
function show_image_area(world){
if (!$("#image_area img").length) { //only run if no current image exists
$('#image_area').show();
$('#image_area').prepend("<img id='tw_image' src='world+"/7.png' width=\"1000\" height=\"1030\" />");
var myWorld = world;
setTimeout(function () {$("#tw_image").attr("src", myWorld+"/8.png");}, 3000);
}
}

Your setTimeout call is a bit off:
setTimeout($("#tw_image").attr("src", "world+"/8.png"), 3000);
The first argument should be the function to execute:
setTimeout(function() { $("#tw_image").attr("src", "world/8.png") }, 3000);
Also, I'm not sure what "world" is so I merged it into the new src path to fix a stray double quote.

jQuery - link working *only* after some time

I have a link:
Here's my link
This is not a normal clickable link, it's coded in jQuery like this:
$("#link").hover(function(e) {
e.preventDefault();
$("#tv").stop().animate({marginLeft: "50px"});
$("#tv img)").animate({opacity: 1});
})
So after hovering unclickable link there's change of #tv's margin and opacity.
Is there any way of making this work only after the user hovers the link area with pointer for more than two seconds?
Because now everything happens in real time.
I know there's delay(), but it doesn't work because it just delays the animation and in this case I don't want any action if the pointer is over for less than two seconds.
Possible without a loop?

What you're after is called hoverIntent.

var animateTimeout;
$("#link").hover(function() {
if (animateTimeout != null) {
clearTimeout(animateTimeout);
}
animateTimeout = setTimeout(animate, 2000);
}, function() {
clearTimeout(animateTimeout);
});
function animate() {
//do animation
}

You just need a setTimeout() to delay the code, along with a clearTimeout() to clear it if the user leaves the link within 2 seconds.
Example: http://jsfiddle.net/mNWEq/2/
$("#link").hover(function(e) {
e.preventDefault();
$.data(this).timeout = setTimeout(function() {
$("#tv").stop().animate({marginLeft: "50px"});
$("#tv img)").animate({opacity: 1});
}, 2000);
}, function(e) {
clearTimeout($.data(this,'timeout'));
});