We Keep Coding

why does jquery click event (hide/show) only work properly for the first element clicked

I have laid out my page to have a "navigation" page that consists of 3 divs that span the page, all 33% height. When you click one of the divs the other two should slide out and the information pertaining to the div you clicked should slide in in their place. This works for the first element that is clicked, no matter which one it is. But the second one I click always wraps the element to the wrong line on slide in. Any help would be much appreciated. Each div has its own click event, I have included one of the 3 below.
$('#contactdiv').click(function(){
$('#aboutdiv').hide('slide', {direction: 'right'}, 1000);
$('#portfoliodiv').hide('slide', {direction: 'left'}, 1000);
$('#contactinfo1').show('slide', {direction: 'left'}, 1000);
$('#contactinfo2').show('slide', {direction: 'right'}, 1000);
$('#menutoggler').show('pulsate');
$('#menutoggler').click(function(){
$('#contactinfo2').hide('slide', {direction: 'right'}, 1000, function(){
$('#portfoliodiv').show('slide', {direction: 'left'}, 1000);
});
$('#contactinfo1').hide('slide', {direction: 'left'}, 1000, function(){
$('#aboutdiv').show('slide', {direction: 'right'}, 1000);
});
$('#menutoggler').hide('pulsate');
});
});

I'm assuming, you added the below piece of code in all (contactdiv, portfoliodiv, aboutdiv) of the click handlers.
$('#menutoggler').click(function(){})
So everytime you click one of the 3 menu divs, you are adding one click handler on #menutoggler.
Say you clicked on contactdiv and then aboutdiv. Now, if you click on menutoggler, the click handle on #menutoggler inside contactdiv will ALSO be executed along with the click handle on #menutoggler inside aboutdiv (sorry if i didn't explained it properly)
What you should probably do is write separate click handlers based on "task"
click handler on either of contactdiv, portfoliodiv, aboutdiv
toggle menutoggler
HTML
<div id="contactdiv" class="menuItem"></div>
<div id="portfoliodiv" class="menuItem"></div>
<div id="aboutdiv" class="menuItem"></div>
JS
var ids = ['contactdiv', 'portfoliodiv', 'aboutdiv'];
var activeMenu;
function hideOtherMenus(id) {
var otherMenus = ids.filter(function(i) {
return i !== id;
});
otherMenus.forEach(function(i) {
// you probably need more if/else conditions if you want to set the correct direction
$('#' + i).hide('slide', {direction: 'right'}, 1000);
});
}
function showInfo(id) {
if(id === 'contactdiv') {
['contactinfo1', 'contactinfo2'].forEach(function(i) {
// you probably need more if/else conditions if you want to set the correct direction
$('#' + i).show('slide', {direction: 'right'}, 1000);
});
}
// do the same for portfolio and about
}
$('.menuItem').click(function(){
activeMenu = this.id;
hideOtherMenus(activeMenu);
showInfo(activeMenu);
$('#menutoggler').show('pulsate');
});
$('#menutoggler').click(function(){
if (activeMenu === 'contactdiv') {
$('#contactinfo2').hide('slide', {direction: 'right'}, 1000, function(){
$('#portfoliodiv').show('slide', {direction: 'left'}, 1000);
});
$('#contactinfo1').hide('slide', {direction: 'left'}, 1000, function(){
$('#aboutdiv').show('slide', {direction: 'right'}, 1000);
});
}
// do the same for portfolio and about
$('#menutoggler').hide('pulsate');
});
Note: you could handle the if/else conditions better if you name the divs properly.

jQuery animate height during .show('slide')

I want to know if someone can help me with this:
http://jsfiddle.net/jalxob/wMck2/7/
$(".turn_next").click(function(){
$(".box2").hide();
$(".box3").animate({height:'300px'}, 300);
$(".box3").show('slide', {direction: 'right'}, 500);
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box2").animate({height:'100px'}, 300);
$(".box2").show('slide', {direction: 'left'}, 500);
});
I want that before the slide transition between box2 (the red one) and box3 (the yellow one) the user could see the height animation because the height of both are different.
Any idea?
Thank you guys!

Do you need this?
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300,function(){
$(".box3").show('slide', {direction: 'right'}, 500);
});
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300,function(){
$(".box2").show('slide', {direction: 'left'}, 500);
});
});
DEMO

jQuery - How to apply .animate() and .show('slide') at the same time?

In this demo http://jsfiddle.net/vHcXN you can see that wjen you click on the link a transitions starts. First the div height changes and then the slide effect.
How can I make both works at the same time?
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300,function(){
$(".box3").show('slide', {direction: 'right'}, 500);
});
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300,function(){
$(".box2").show('slide', {direction: 'left'}, 500);
});
});

Remove the second animation from the call back of the first one,
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300);
$(".box3").show('slide', {direction: 'right'}, 500);
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300);
$(".box2").show('slide', {direction: 'left'}, 500);
});
The animation effect which you have specified in the call back function only get fired only after the initial animation completed. That's why you are seeing that effect.
DEMO

Since you're passing a function as an argument to animate, it's being used as a callback for after the animation finishes. Just call them successively:
http://jsfiddle.net/wyE92/
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300);
$(".box3").show('slide', {direction: 'right'}, 500);
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300);
$(".box2").show('slide', {direction: 'left'}, 500);
});
Note that they don't sync up exactly because you passed different lengths to the animations.

Currently, you've got the .show('slide'... function firing as a complete callback for when the .animate({'left'... function completes. Remove the callback and apply the second animation below the first:
$(".turn_next").click(function(){
$(".box2").hide();
$(".box1_content").animate({height:'300px'}, 300);
$(".box3").show('slide', {direction: 'right'}, 500);
});
$(".turn_back").click(function(){
$(".box3").hide();
$(".box1_content").animate({height:'100px'}, 300);
$(".box2").show('slide', {direction: 'left'}, 500);
});
Here is your edited fiddle showing the new animations together. Note that because of the different time lengths the two animations do not line up.

objects disappear while sliding over them while they fade in

I have a problem with some jQuery fadeIn effect. This is actually on this website: website here. The problem appears when you select any option from the main menu and during page load up (menu is fading In) slide over the menu buttons. Then some of them (the one you were fading over) will not appear, or will appear slightly faded.
I have used this code for buttons:
HTML:
<nav>
<a id="b1" href="index.html"><span>01. <strong>ABOUT US</strong></span><div></div></a>
<a id="b2" href="webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a>
<a id="b3" href="mobile-websites.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a>
<a id="b4" href="captive-portals.html"><span>04. <strong>CAPTIVE PORTALS</strong></span><div></div></a>
<a id="b5" href="portfolio.html"><span>05. <strong>PORTFOLIO</strong></span><div></div></a>
<a id="b6" href="contact-us.html"><span>06. <strong>CONTACT US</strong></span><div></div></a>
</nav>
JQUERY:
$(document).ready(function(){
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500);
}, 300+100*i);
})(i);
}
});
JS FIDDLE HERE:
http://jsfiddle.net/tucado/9hhZW/
(slide mouse over buttons while fading in and you will know what I mean).
Basically I want buttons to appear normally so the sliding mouse over them won't interrupt them in fading to 100%.
Thank you in advance for any solution for this problem.

Just return from your mouseenter and mouseleave handlers if the element is being animated, you can do that with .is(':animated') .
See working fiddle
UPDATE: My above solution will exit when the element is animating, but that also included the own animations of the mouseenter, mouseleave handlers, we want to only exit if it's the fadein animation, so to distinguish that I set a property called fading when starting to fading an element and remove it when it ends the fade effect, so we can check for this property in the mouseenter mouseleave handlers.
See new working fiddle
And I paste the code here:
$(document).ready(function(){
$("nav a").mouseenter(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).data('fading', true).fadeIn(500, function() {
$(this).data('fading', false);
});
}, 300+100*i);
})(i);
}
});

I think the problem is, that you stop the elements animation before they are initialized first (first fadeIn();)
I've created a fiddle for you using the fadeIn() callback to append the hover after showing first time:
$(document).ready(function(){
var appendHover = function () {
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
}
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500, function() {appendHover();});
}, 300+100*i);
})(i);
}
});
http://jsfiddle.net/9hhZW/2/

How to ignore mouse activity until function completes

I use the following code to slide out a div on a mouse-over, wait a couple of seconds and slide the div back.
$(document).ready(function()
{$("#divider").mouseover(function ()
{$("#slider").show("slide", {direction: "left"}, 1000).pause(2000).hide("slide", {direction: "left"}, 1000);}
);}
);
I'm sure this is simple, but I have limited Javascript/jQuery knowledge. How do I make it so any mouse activity on the trigger is ignored until the animation completes? Right now, if while the div is open you mouse over the trigger area it "remembers" and plays the animation for as many times as you've moved the pointer through the trigger area. Page

I'd suggest removing the event from your divider until the animation is finished, than using the hide callback function to add that event handler back in.
$(document).ready(function() {
function divider_mouseover() {
$('#divider').unbind('mouseover');
$("#slider")
.show("slide", {direction: "left"}, 1000)
.pause(2000)
.hide("slide", {direction: "left"}, 1000, function() {
$("#divider").mouseover(divider_mouseover);
});
};
$("#divider").mouseover(divider_mouseover);
};

Don't bind and unbind and rebind instead use a flag to decide if you should care about the event.
$(document).ready(function(){
$("#divider").mouseover(function(){
var $this = $(this);
if($this.data('nomouse')) return;
$this.data('nomouse',true);
$("#slider")
.show("slide", {direction: "left"}, 1000)
.pause(2000)
.hide("slide", {direction: "left"}, 1000, function() {
$this.data('nomouse',false);
});
});
});
Binding and unbinding was of one Paul Irish's jQuery Anti-Patterns in the yayQuery podcast

Swizzle out the event handler (not sure if this works, but something along these lines):
var omo = function() {
{$("#divider").mouseover(function () {});}
slide();
}
var slide = function() {
{$("#slider").show("slide", {direction: "left"}, 1000)
.pause(2000)
.hide("slide", {direction: "left"}, 1000);
}
{$("#divider").mouseover(omo);}
}
$(document).ready(function()
{$("#divider").mouseover(omo);}
);