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);
}
});
Related
I know this might be silly but I would like to know if there is a way to realize.
Basically, I would like the dropdown-content element to 'KEEP DISPLAYING' even after 3 secs of mouse moving-out of the parental 'dropbtn' button or element.
E.g. code:
$(function() {
$('#dropbtn').hover(function() {
$('.dropdown-content').css('display', 'block');
}, function() {
// on mouseout:
setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
$('.dropdown-content').hover(function(){
$('.dropdown-content').css('display', 'block');
},function(){
$('.dropdown-content').css('display', 'none');
})
});
Current issue is that setTimeout() function is overriding my desired way on this particular line of JS code:
$('.dropdown-content').css('display', 'block');
In another word, I want setTimeout() to be effective if and only if I set not my mouse cursor on 'dropdown-content' div.
Hope someone can help out :)
Instead of using hover, you could use mouseenter/mouseleave to 'toggle' the .dropdown-content, except the delay of 3s on mouseleave:
$(function() {
var dropdownTimeout = null;
$('#dropbtn').mouseenter(function() {
if(dropdownTimeout) {
clearTimeout(dropdownTimeout);
dropdownTimeout = null;
}
$('.dropdown-content').css('display', 'block');
});
$('#dropbtn').mouseleave(function() {
dropdownTimeout = setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
});
I'm working on this website.
Here is the code for the menu trigger on the left sidebar:
jQuery(document).ready( function(){
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function(){
jQuery('#dimmer').fadeToggle(500);
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {direction: "left"}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if(jQuery(".nav-animate").is(":visible")) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
// The above part works perfectly, however the part below doesn't:
if(!jQuery(".nav-animate").is(':visible')) {
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
I tried using if(jQuery(".nav-animate").is(":hidden")) {//...}, and if(jQuery(".nav-animate").css('display') == 'none') {//...} but both doesn't work.
My guess, when you click to "CLOSE" it does the :visible or :hidden check, but the menu is still open at the time you click so it still doesn't have the display:none until the click event performs that. In that case, what can I do?
Thanks in advance for your time and suggestions.
animation related methods will affect the visibility check, so check the state before call to toggle
jQuery(document).ready(function () {
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function () {
jQuery('#dimmer').fadeToggle(500);
//negate since fadetoggle will toggle the state
var visible = !jQuery('.nav-animate').stop().is(':visible');
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {
direction: "left"
}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if (visible) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
} else {
// The above part works perfectly, however the part below doesn't:
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
Just add condition else on one your block condition right.. It's mean will be run if first condition block not true.
if(!jQuery('.nav-animate').stop().is(':visible')) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
else{
// to do
}
i'm trying to achieve a Scroll to Top button that fades in at a certain point on the page and fades out at a certain point...I have the fadeIn function working properly but can't seem to get the proper syntax for the click event fadeOut; it just disappears once you get to the top, instead of fading out if you're <= 675px. Any help is greatly appreciated!
HTML:
</div>
BACK TO LOGIN
</div>
jQuery:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop : 0
}, 800);
return false;
});
});
I think your question isn't so clear but maybe you mean that when click on the scrollToTop button it doesn't disappear until the scroll reach to top of page, it's because when your animation function is running the .scroll can't runs so fast that disappear button when reach to 675px but you can fadeout button as soon as click on it using this code:
jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});
$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});
The isClicked variable is added to prevent blinking button (you can remove it to figure out what i'm saying).
Also i add this line:
$('.scrollToTop').css("display","none");
because it seems that you don't need a "Scroll To Top" button when page load for first time and you are on the top of page.
Check JSFiddle Demo
This question seems easy but I cant seem to get the fade effect to work properly, please view the fiddle to see the code, you will notice that the image only fades in when you scroll back up and does not fade out when you scroll down, why does this happen? I don't think I fully understand the code I've written I would appreciate some help.
Here is the jQuery code
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
divs.stop(true, true).fadeIn(5000);
} else {
divs.stop(true, true).fadeOut(5000);
}
});
Thank you in advance!
http://jsfiddle.net/a4FM9/809/
Demo
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<10){
divs.stop(true, true).hide().fadeIn(5000); //added hide before fadeIn
} else {
divs.stop(true, true).show().fadeOut(5000); //added show before fadeOut
}
});
Very simply you could just remove .stop(true, true) and it fades in both directions:
Working Example
var divs = $('.banner');
$(window).scroll(function(){
if($(window).scrollTop()<=10){
divs.fadeIn(5000);
} else {
divs.fadeOut(5000);
}
});
If you want to have the fade take place after the scroll has stopped you could use a timeout function like so:
Working Example 2
$(window).scroll(function () {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function () {
var divs = $('.banner');
if ($(window).scrollTop() <= 200) {
divs.fadeIn(5000);
} else {
divs.fadeOut(5000);
}
}, 1000)); //timeout set to 1 second
});
See: yckart's timeout function for more info on this timeout function.
I have a webpage with a div container that contains the main content, and inside it there is a div that should appear when I put my mouse in the container. This is the code that I tried:
var running=0;
var running2=0;
$('div.container').mouseenter(function()
{
if (running==0)
{
running=1;
$('div.rightcontainer').css("margin-right",-350)
.animate({marginRight:0}, 750, function(){running=0;});
}
}
);
$('div.container').mouseleave(function() {
if (running2==0) {
running2=1;
$('div.rightcontainer').css("margin-right",0)
.animate({marginRight:-350}, 750, function(){running2=0;});
}
});
This code works:
$('div.container').mouseenter(function() {
console.log('trigger');
$("div.rightcontainer")
.css("visibility","visible")
.css("margin-right",-$("div.rightcontainer").width())
.animate({
marginRight:0
}, 1200);
});
$('div.container').mouseleave(function() {
console.log('leave');
$("div.rightcontainer")
.css("visibility","visible")
.css("margin-right", "320")
.animate({
marginRight:-350
}, 1200);
});
However, the problem is that if the mouse enters multiple times, the object keeps entering and exiting.
Edit:
The .one() only does it once, what I mean is in a way it stacks all the enters and exits and performs the animation that many times.
the .stop() solution was better, however the animation would jump to the end from wherever it was. If there is a way for, if the mouse leaves the container mid-animation, for the animaiton to stop where it is and animate back the other way?
Here is a JSFiddle with a simplified version of the website. The container is anything below the navbar. http://jsfiddle.net/yEzXp/
Use .stop()
$('div.container').mouseenter(function() {
$("div.rightcontainer")
.stop(true, true)
.css("visibility","visible")
.css("margin-right",-$("div.rightcontainer").width())
.animate({
marginRight:0
}, 1200);
});
$('div.container').mouseleave(function() {
$("div.rightcontainer")
.stop(true, true)
.css("visibility","visible")
.css("margin-right", "320")
.animate({
marginRight:-350
}, 1200);
});