Hopefully this is a simple request. I found this code that will work perfectly for what I want to do (Rotate through list items while fading in and out) http://jsfiddle.net/gaby/S5Cjm/1/ . However, I am looking to have the animation pause on mouse over and resume on mouse out. I am a novice at the moment with Javascript and JQuery, so any help would be appreciated.
Thanks.
EDIT: Side questions: Is there a benefit to using JQuery to do this? Would a stand alone script be more appropriate?
I attached the hover event to your list items. The over function stops the animation and all following animations using jQuery.stop(true). The out function resumes the animation:
http://jsfiddle.net/US4Fc/1/
var duration = 1000
function InOut(elem) {
elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#content li').hide().hover(
function() {
$(this).stop(true)
},
function() {
var curOp = Number($(this).css("opacity"));
$(this).fadeTo(duration*(1-curOp), 1, function() {
InOut($(this))
});
}
);
InOut($('#content li:first'));
});
Will this work for you?
$(function(){
var active;
$('#content li').hide().hover(
function(){
active = $(this).stop();
},
function(){
active && InOut(active);
}
);
InOut( $('#content li:first') );
});
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 have created a very simple jQuery sliding function that works, but requires improvements. The basic timeline of the function needs to:
SlideDown on mouseenter
Stay visible until mouseleave
When mouseleaves, delay the SlideUp by 2 seconds
^^This works, but if you slide up and down several times, the function stops working for a few seconds. Can anyone please suggest a solution? JS FIDDLE attached
JSFIDDLE: http://jsfiddle.net/lord_dev/b1g50eqk/4/
$(document).ready(function(){
$hover = true;
$( "#slide" ).mouseenter(function() {
if($hover) {
$( ".slide--hidden" ).slideDown('fast');
}
});
$( "#slide" ).mouseleave(function() {
$hover = false;
$( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
enableHover();
$(this).dequeue();
});
});
function enableHover() {
$hover = true;
}
});
Replace your javascript with this. It works great if i understood your problem correctly.
$(document).ready(function(){
var thetimeout;
$('#slide').mouseover(function() {
clearTimeout(thetimeout);
$('.slide--hidden').slideDown();
});
$('#slide').mouseleave(function() {
thetimeout = setTimeout(function() {
$('.slide--hidden').slideUp();
}, 2000);
});
});
I'm building a multi-level menu, where the submenu is being displayed with jquery.
It drops down when a main link is hovered, then slides up when the mouse leaves.
I want to stop the mouseleave action, when mouseover is active, but i can't stop the second event (animate->margin-bottom). I'm new to jquery, so i went through many questions and googled a lot, but i don't really understand what i'm supposed to do here. Any help will be greatly appreciated!
jQuery(".item-102 a").on('mouseenter', function() {
jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
jQuery("#submenu").slideDown("slow");
});
jQuery("#submenu").on('mouseleave',function() {
jQuery("#submenu").delay(2000).slideUp("slow");
jQuery("#horizontal-menu").delay(2000).animate({"margin-bottom": "+20px"}, 200);
});
jQuery("#submenu").on('mouseover', function() {
jQuery(this).stop();
});
Just try with:
jQuery("#submenu").on('mouseover', function()
{
jQuery(this).stop();
jQuery("#horizontal-menu").stop();
});
I've managed to do it, thanks everyone. Hsz's answer was good, but it didn't fully stop the event, so here's the solution:
function(){
jQuery(".item-102 a").on('mouseenter', function() {
jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
jQuery("#submenu").slideDown("slow");
});
var hover_off = false;
jQuery("#submenu").mouseover(function (){
hover_off = false;
});
jQuery("#submenu").mouseleave(function() {
hover_off = true;
setTimeout(myMouseOut, 1000);
});
function myMouseOut(){
if (hover_off == true){
jQuery("#submenu").delay(1000).slideUp("slow");
jQuery("#horizontal-menu").delay(1000).animate({"margin-bottom": "+20px"}, 200);
}
};
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 function that hides and shows divs on scroll based on pageY position, but I also need the ability to have it automatically hide and show divs in order(only the ones with children), sort of like a fake animated Gif, looping forever.
I tried this:
function autoPlay() {
$('.conP').each(function(){
if ($(this).children().length > 0) {
setInterval(function(){
$(this).show().delay('100').hide();
},300);
}
});
}
which is not returning any errors, but it's not hiding or showing any of the divs with class="conP".
Any suggestions as to what I'm doing wrong/how I could improve this?
try this -
function autoPlay() {
$('.conP').each(function(){
if ($(this).children().length > 0) {
var $that = $(this);
setInterval(function(){
$that.show().delay('100').hide();
},300);
}
});
}
You have an incorrect reference to this in your setInterval closure. Refer to "How this works" in JavaScript Garden.
In your case you should save the reference to this in a variable:
$('.conP').each(function() {
var $element = $(this);
setInterval(function () {
$(element).show().delay('100').hide();
}, 300);
});
Or, better use the first argument passed to each, which is equal to $(this) in this case.
Not sure it's a great idea to run intervals inside loops, but I'm guessing the issue is scope inside the interval function :
function autoPlay() {
$('.conP').each(function(i, elem){
if ( $(elem).children().length ) {
setInterval(function(){
$(elem).show().delay(100).hide();
},300);
}
});
}
I really appreciate all the help guys, I seem to have figured out the animation part:
setInterval( function() {
autoPlay();
},120);
function autoPlay() {
var backImg = $('#outterLax div:first');
backImg.hide();
backImg.remove();
$('#outterLax').append(backImg);
backImg.show();
}
By hiding whichever div is first, and removing it from-then appending it back into-the containing div, and showing the new first div, it animates quite nicely!