We Keep Coding

Only activate Jquery function on second scroll movement on mouse

I have created two <div>s.
On scroll, I would like .indie to disappear, and .jazz to appear.
Then, on the second scroll, I would like a 3rd div to appear.
At the moment, my Javascript hides both divs and I am trying to think of a way I can number each scroll movement to activate the visibility of each <div>. In numbering the scroll movements, I would also like to scroll up returning the 1st <div> again.
Currently my code looks like this. I am also using animate.css
$(window).scroll(function(){
if ($('.indie').is(':visible')) {
$('.fadeInRight').addClass("fadeOutLeft").removeClass("fadeInRight");
$('.fadeInLeft').addClass("fadeOutRight").removeClass("fadeInLeft");
$('.fadeInUp').addClass("fadeOutDown").removeClass("fadeInUp");
$('.fadeInDown').addClass("fadeOutUp").removeClass("fadeInDown");
$('.bounceOutRight').addClass("bounceInLeft").removeClass("bounceOutRight");
$('.bounceOutLeft').addClass("bounceInRight").removeClass("bounceOutLeft");
$('.bounceOutUp').addClass("bounceInDown").removeClass("bounceOutUp");
$('.bounceOutDown').addClass("bounceInUp").removeClass("bounceOutDown");
$('.jazz').css("visibility", "visible");
setTimeout(function() {
$('.indie').css("visibility", "hidden");
}, 500);
}
});
$(window).scroll(function(){
if ($('.jazz').is(':visible')) {
$('.bounceInRight').addClass("bounceOutLeft").removeClass("bounceInRight");
$('.bounceInLeft').addClass("bouneOutRight").removeClass("bounceInLeft");
$('.bounceInUp').addClass("bounceOutDown").removeClass("bounceInUp");
$('.bounceInDown').addClass("bounceOutUp").removeClass("bounceInDown");
setTimeout(function() {
$('.jazz').css("visibility", "hidden");
}, 500);
}
});

Place all your code into a single function, as the second declaration overwrites the first. I also made a few tweaks:
$(window).scroll(function(){
if ($('.indie').is(':visible')&&!$('.jazz').is(':visible')) {
$('.fadeInRight').addClass("fadeOutLeft").removeClass("fadeInRight");
$('.fadeInLeft').addClass("fadeOutRight").removeClass("fadeInLeft");
$('.fadeInUp').addClass("fadeOutDown").removeClass("fadeInUp");
$('.fadeInDown').addClass("fadeOutUp").removeClass("fadeInDown");
$('.bounceOutRight').addClass("bounceInLeft").removeClass("bounceOutRight");
$('.bounceOutLeft').addClass("bounceInRight").removeClass("bounceOutLeft");
$('.bounceOutUp').addClass("bounceInDown").removeClass("bounceOutUp");
$('.bounceOutDown').addClass("bounceInUp").removeClass("bounceOutDown");
$('.jazz').css("visibility", "visible");
setTimeout(function() {
$('.indie').css("visibility", "hidden");
}, 500);
}
if ($('.jazz').is(':visible')) {
$('.bounceInRight').addClass("bounceOutLeft").removeClass("bounceInRight");
$('.bounceInLeft').addClass("bouneOutRight").removeClass("bounceInLeft");
$('.bounceInUp').addClass("bounceOutDown").removeClass("bounceInUp");
$('.bounceInDown').addClass("bounceOutUp").removeClass("bounceInDown");
setTimeout(function() {
$('.jazz').css("visibility", "hidden");
}, 500);
}
});

jQuery: stop animation that is delayed, before it is triggered

I'm foolin around with the jquery hover functionality. the current code snippet looks like this:
$leftColumn.children().first().hover(
function(event) {
var $this = jQuery(this);
$this.css({
'background-color': '#505050'
}).parent().stop()
.animate(
{
'z-index': '999',
width: '220px'
},
{
duration: '1000'
}
);
},
function(event) {
var $this = jQuery(this);
$this.parent().stop()
.animate(
{
width: '38px',
'z-index': '1'
},
{
duration: '1500',
complete: function() {
$this.css({
'background-color': 'transparent'
});
}
}
);
}
);
What this basically does is increasing the width of a div (which is position absolute) to overlay another div.
I choosed to use jQuerys animate() functionality instead of CSS3s transition because I want to trigger a callback whenever the closing (decreasing the width again) animation is done.
My problem now is, that I want to delay the closing animation for 2 seconds (and yes I know about the delay() vs setTimeout() discussion) which worked fine with setTimeout(). However as the animation is timed out for the given duration it will run, even if I enter the hoverable area again. This of course makes sense as the stop() only triggeres while an animation is on the go, which is not the case if it is timed out.
How can I make this thing work (stop the closing animation when reentering the hoverable area) and still keep a timeout / delay before decreasing the width on "hover leave"?

how do I stop the query animation que when a nav button is clicked

What I want: I created a sort of image gallery with a thumbnail slider and I want the thumbnails to scroll when a nav button is clicked but if the button is pushed again before the animation is completed it doesn't keep adding to the que, it clears the que and only completes the current animation.
What my problem is: When the button is clicked it puts the click animation in a que and completes all the clicks in order. Maybe someone can help we word this better.
What I have tried: I have tried adding .finish() and .stop(true, true) to my js file but I can't seem to get it working right. I'm probably putting it in the wrong spot or even using the wrong thing, I don't know and so I need some help.
Here is a functioning jsfiddle: http://jsfiddle.net/ma9j6o09/2/
Some of it is not working since my images are locally hosted but the slider part for the thumbnails is.
This is my function for animating the movement; what do I add to get the effect I need?
var clicks = 0;
$("#right").click(function() {
if ( clicks < 5 ) {
clicks++;
$("#thumbContainer").animate({
left: "-=128px"
}, 500, function() {
// Animation complete.
});
}
});
$("#left").click(function() {
if (clicks > 0) {
clicks--;
$("#thumbContainer").animate({
left: "+=128px"
}, 500, function() {
// Animation complete.
});
}
});

Try this out: http://jsfiddle.net/ma9j6o09/3/
In response to your question about .stop() you would use it like this:
$("#thumbContainer").stop(true, true).animate({
left: "+=128px"
}, 500, function() {
// Animation complete.
});
});
But this will indeed not achieve what you want as it means it will stop the animation and jump to the last frame straight away so you lose the animation you wanted.
Instead use the flag I used in the fiddle which makes it impossible to even try animate whilst an animation is in progress.
var clicks = 0,
animating = false;
$("#right").click(function() {
// Only animate if we are not already animating
if ( clicks < 5 && !animating ) {
animating = true;
clicks++;
$("#thumbContainer").animate({
left: "-=128px"
}, 500, function() {
animating = false; // No longer animating
// Animation complete.
});
}
});
$("#left").click(function() {
// Only animate if we are not already animating
if (clicks > 0 && !animating) {
animating = true;
clicks--;
$("#thumbContainer").animate({
left: "+=128px"
}, 500, function() {
animating = false; // No longer animating
// Animation complete.
});
}
});

Jquery toggle not working properly?

I have a button that I want to click (in my case this is '.circle'). When I click it, I want the #data div to fade in then animate with a 'margin-top:50px'. Then when the user clicks the toggle button the second time it animates to 'margin-top:0px' then fades out.
However the problem I have run into is that when I click the toggle the third time I would expect it to run the first function again. But instead it does something weird and resets to a margin-top of 50px before the first function is run again.
I would really appreciate some help with this. Here is a JSFiddle I whipped up with identical code and you will see the problem i'm having after clicking it multiple times. Also another problem was when you click it for the first time it doesn't work, but works on the second click.
http://jsfiddle.net/sN8Tn/
Ill also post the bit of jquery below:
$(".button").click(function(){
$(".button").toggle(
function(){
$("#showme").fadeIn(500,
function(){
$("#showme").animate({ "margin-top" : "50px" }, 500, 'linear');
}
);
},
function(){
$("#showme").animate({ "margin-top" : "0px" }, 500, 'linear',
function(){
$("#showme").fadeOut(500);
}
);
});
});​

Remove the .click() function. The click is implied with the .toggle() function. jQuery .toggle() jsFiddle
$(".button").toggle(
function() {
$("#showme").fadeIn(500, function() {
$("#showme").animate({
"margin-top": "50px"
}, 500, 'linear');
});
}, function() {
$("#showme").animate({
"margin-top": "0px"
}, 500, 'linear', function() {
$("#showme").fadeOut(500);
});
});​

Jquery Timer Slide function

Right now I have a div that slides right to left and then vice versa back to its original place. But overall its not really how I want it to work. My main goal: is for the user to hover over the main div which will then pull out the sliding div. The part that gets tricky is the following: If the user forgets to slide the dive back, I want to give it time frame that will cause it to close automatically after a certain time has passed. Here is my working code so far: jsfiddle.net/eMsQr/14/.
My JavaScript function:
$(document).ready(function() {
$("#arrow").hover(
function(){
$("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
},
function(){}
);
});
$("#arrow").click(function(e){
$("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

Try this: http://jsfiddle.net/vansimke/cJ5pf/
I hooked into the mouseleave event and added a setTimeout. You might need to catch the timeout if you need to cancel it later (i.e. they reenter the arrow)

Here's a jsFiddle example that sets a 3 second delay via the setTimeout function.:
jQuery
var cto;
$("#arrow").hover(
function() {
clearTimeout(cto);
$("#inner").stop().animate({
marginRight: "0px",
opacity: "1px",
height: "100px"
}, 500);
}, function() {
cto = setTimeout(function(){$('#arrow').trigger('click')}, 3000);
});
$("#arrow").click(function(e) {
$("#inner").stop().animate({
marginRight: "-100px",
opacity: "1px",
height: "100px"
}, 500);
});​
Note that if the user moves his mouse away and then returns it to the div, the box remains open again until they leave at which point the 3 second countdown timer begins.

You need to make sure you utilize the second function() in jQuery's hover method.
At the moment you're only animating your slide-out div when the user hovers over the main div. You want it to also animate on hover out.
Here's the updated jsFiddle.

Inside the hover function you can add an additional line to trigger the click event using the below line:
setTimeout(function() { $("#arrow").trigger('click'); }, 5000);
the 5000 is the number of milliseconds to wait before triggering the click.

see the fiddle here: http://jsfiddle.net/eMsQr/51/
it uses the mouseleave jquery and also delay. Change the value in the delay to get the time you want.
$("#arrow").mouseleave(function(){
$("#inner").stop().delay(500).animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

You need to use setTimeout() to set the delay to closing the div. You also need to use clearTimeout() in the opening function to stop it auto closing if someone mousesout, then back over again:
var timeout;
$("#arrow").hover(
function() {
clearTimeout(timeout); // clear the timer which will close the div, as we now want it open
$("#inner").stop().animate({
marginRight: "0px",
opacity: "1px",
height: "100px"
}, 500);
}, function() {
timeout = setTimeout(function() {
$("#inner").stop().animate({
marginRight: "-100px",
opacity: "1px",
height: "100px"
}, 500);
}, 1000); // close the open div 1 second after mouseout.
}
);
Example fiddle