We Keep Coding

Add class and remove class not work in single statement

$("button").click(function(){
$("#p1").addClass("size").slideUp(2000).slideDown(2000).removeClass("size");
/* p1 is a id of element, i want to add size class after that to remove it */
});

You need to give the second statement as a callback function on the slideDown():
$("button").click(function(){
$("#p1").addClass("size").slideUp(2000).slideDown(2000, function () {
$(this).removeClass("size");
});
});
Or still better, you need to use the callback function of the slideUp also!
$("button").click(function() {
$("#p1").addClass("size").slideUp(2000, function () {
// Execute this after 2 seconds of slideUp animation.
$(this).slideDown(2000, function () {
// Execute this after 2 seconds of slideDown animation.
$(this).removeClass("size");
});
});
});
Because they are not supposed to happen in parallel, but in a sequential order, after each has been finished.

Actually they are adding and removing fine, but it is happening instantly. You need to put some delay in it.
$("button").click(function(){
$("#p1").addClass("size").slideUp(2000, function(){$(this).slideDown(2000 ,function(){ $(this).removeClass("size")})});
/* p1 is a id of element, i want to add size class after that to remove it */
});

jQuery - wait untill all elements are faded out

I have the following problem: I want something to happen after two elements have been faded out. They are supposed to fade out at the same time:
$("#publish-left, #publish-right, #print-run").fadeOut(function(){
//do something
});
However this doesn't seem to do what I want. How do I get my script to fade out two elements and then do something?
Edit: I just noticed there is something special about what I want to do. I don't always know if all elements are visible. So sometimes not all elements will be faded out, only some. However since some elements are already faded out, this will cause the function to trigger immediately I believe.

http://jsfiddle.net/k6yg319o/
Try the example, it should work. Just make sure the DOM is ready!
$(function() {
$('#test1, #test2, #test3').fadeOut(function() {
$('#test3').show();
})
});

you can use callback function,
$("#publish-left, #publish-right").fadeOut("slow", function(){
//call back function executes are faded out
//do something
});

Check the docs for fadeOut.
.fadeOut( [duration ] [, complete ] )
First parameter takes a duration, second is a callback function to execute after fadeOut is complete.
$("#publish-left, #publish-right").fadeOut(1000, function() {
document.body.style.backgroundColor = 'blue'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="publish-left">Left</div>
<div id="publish-left">Right</div>
Fade out both elements, then turn blue.

You could just run the first fade without the callback and run the second one with the callback if they are both fading at the same speed.
Here's a fiddle.
$("#publish-left").fadeOut();
$("#publish-right").fadeOut(function () {
alert("both fades finished since both fade at the same rate.");
});
Or if you want to use separate speeds you could flip a switch when each one is finished and then run the callback when the second one finishes.
Here's a fiddle.
var faded1 = false;
var faded2 = false;
var callback = function(){ alert("both fades finished"); };
$("#publish-left").fadeOut(function(){
faded1 = true;
if(faded1 && faded2) callback();
});
$("#publish-right").fadeOut(function(){
faded2 = true;
if(faded1 && faded2) callback();
});
Edit..
after reading your comment..
Or if one of them may already be hidden, you could just check to see if they're both hidden in your callback function..
Here's another fiddle
var callback = function(){
// If either element is still visible, don't do anything.
if($("#publish-left").is(":visible") || $("#publish-right").is(":visible")) return;
// Otherwise, do something
alert("both are hidden now");
};
// let's hide the first one right away for testing
$("#publish-right").hide();
$("#publish-left").fadeOut(callback);
$("#publish-right").fadeOut(callback);

how to fire a jquery child function at the start of parent animation

I'm coding a button that has a CSS arrow which flips up and down every time it's container is clicked.
It looks fine, but i can't figure out how to fire the toggleClass function as soon as slideToggle has been clicked.
The arrow looks like it is lagging a little because it waits a fraction of a second until the end of the slideToggle animation.
Is it possible to make the toggleClass fire at the start of the animation rather than the end?
$("#content_link").click(function(){
$("#content").slideToggle("fast",function(){
$("div#arrow_container").toggleClass('arrow_down');
$("div#arrow_container").toggleClass('arrow_up');
});
});

not sure if this is what you are asking for but yes call it before the slideToggle() function and not inside its callback function
$("#content_link").click(function(){
$("div#arrow_container").toggleClass('arrow_down')
.toggleClass('arrow_up');
$("#content").slideToggle("fast");
});

Remove that code from the call back and add it after the slideToggle function call like this
$("#content_link").click(function(){
$("#content").slideToggle("fast");
$("div#arrow_container").toggleClass('arrow_down');
$("div#arrow_container").toggleClass('arrow_up');
});

You can set a start callback as well:
$("header#tag_cat1 div#cat1_content_link").click(function(){
$("#tag_cat1_content").slideToggle({
duration: "fast",
complete: function(){
$("section.category header > div#cat1_content_link > div").toggleClass('gt_arrow_down_5px');
$("section.category header > div#cat1_content_link > div").toggleClass('bt_arrow_up_5px');
},
start: function() {...}
});
});
Take a look at the second form of .slideToggle()

Checking for visibility of a toggled element

I have a button which toggles the visibility of a <div> below it and want to modify the text on the button depending on the visibility of said <div>.
Here is a live demo on jsFiddle
If you click on "Saved Data", the first time it works correctly, but the next time you click the text does not change. This in itself is behaviour that I don't understand.
Now, I could use multiple handlers for slideToggle(), however, elsewhere in the code I also set intervals which load data next to "Cookie data:" and "Server data:". I don't want these intervals to do anything if the <div> is not visible so I use something like this:
this.timer_cookiedata = setInterval(function(){
if (!$savedData.is(':visible'))
{
return null;
}
// ..
});
I'm worried these intervals are not going to work properly because of this is(':visible') business. So the question is, why does this happen (else statement is ignored), and what can I do to mitigate this?

Check out the updated fiddle. When you check for visibility right after you call slideToggle, jQuery may not have updated the visibility of the element yet since the animation takes some time to finish. For this exact reason, slideToggle has a callback you can use to perform operations after the animation has finished:
$(function () {
var $savedData = $('#savedData');
$('#btn-savedData')
.click(function () {
var $button = jQuery(this);
//I'm checking the visibility in the callback. Inside the callback,
//I can be sure that the animation has completed and the visibility
//has been updated.
$savedData.slideToggle('fast', function () {
if ($savedData.is(':visible')) {
$button.html('visible');
} else {
$button.html('not visible');
}
});
});
});​

How to add a delay to a jQuery fadeout?

I'm designing a navigation bar for a site, and I'm trying to noodle out how to get the submenu that appears with each tab to stay visible after the cursor leaves the tab. Since it fades out immediately after the cursor leaves, I can't set a function on the submenu. So what I'm trying to do is introduce a setTimeout() to the out side of the .hover in jQuery, without success. Here's the code:
$('.hovernav').hover(
function () {
$(this).css('background-image', $(this).css('background-image').replace("_o.", "_i."));
tabShowSubnav($(this).attr('id'));
},
function () {
$(this).css('background-image', $(this).css('background-image').replace("_i.", "_o."));
setTimeout('tabHideSubnav($(this).attr("id"))','2000');
});
What am I missing about this setup?

function () {
....
setTimeout('tabHideSubnav($(this).attr("id"))','2000');
}
‘this’ in the inner function is set to the obect the timeout was called on, which is window, not the current instance of hovernav.
Best not to use a string with setTimeout; use a function instead. Then you get access to variables in the enclosing scope, which you can use to remember the this value that was passed to the outer function.
function() {
...
var thisid= this.id;
setTimeout(function() {
tabHideSubnav(thisid);
}, 2000);
}
(As a bonus, this stops JavaScript from having to recompile the function from your string every time. Putting code in strings is almost always bogus.)
Note you will probably need some more logic to cancel the hide-subnav if the mouse goes back into the hovernav. Otherwise instead of an annoying menu bar that keeps closing when the mouse leaves, you've got an even more annoying menu bar that keeps closing the menu even whilst you're hovering it, if you mousedout two seconds ago.

Just taking a guess here, but maybe "this" is out of scope when the function gets called.

Have you tried to have it show() on hover, then fadeOut('slow') on mouseout?
http://docs.jquery.com/Effects/fadeOut
Alternatly, you could .animate({opacity: 0}, 3000) or w/e amount would work for you.
One more edit:
you can have .animate({opacity: 1}, 3000) which would simply delay an already visible element for 3 seconds.
Taken from: http://www.learningjquery.com/2007/01/effect-delay-trick
Here is a simple snippet:
JQuery
$(function(){
$("#HeaderMenu").mouseover(function(){
$("#SubMenu").show();
});
$("#HeaderMenu").mouseout(function(){
$("#SubMenu").animate({opacity: 1}, 3000, function(){$(this).hide()});
});