fadeIn starts from the beginning after mouseleave (setTimeout) - javascript

I am looking for the solution for a navigation menu that I am working. Here is the JSFiddle where you can see the working code.
The fadeIn effect needs to happen only on the nav-item hover, but it is happening while mouseleave from the bottom, left or right side of the menu.

It looks like what you want is: when you move your mouse from a tab to another tab, you don't want the fade-out and in to happen.
In that case, it's because you're not keeping track of whether or not the menu is open. You should only do the fading if the menu was not open, otherwise simply hide and show with no fade.
Code:
var timer;
var isMenuOpen = false;
$('.nav-item').hover(
function() {
$('.subnav--main').hide();
$('.promoted-content--main').hide();
clearTimeout(timer);
if(isMenuOpen){
$(this).find('ul').show();
}
else{
isMenuOpen = true;
$(this).find('ul').fadeIn( 'slow' );
}
},
function() {
timer = setTimeout(function() {
$('.subnav--main').fadeOut( 'fast' );
$('.promoted-content--main').fadeOut( 'fast' );
isMenuOpen = false;
}, 1000);
}
);
And jsfiddle: http://jsfiddle.net/qdafe3uw/

If you're trying to get the menu to stay open and not have it fade out when hovering over different nav-items' the selector should be the nav--main
`var timer;
$('.nav--main').hover(function() {
$('.subnav--main').hide();
$('.promoted-content--main').hide();
clearTimeout(timer);
$(this).find('ul').fadeIn( 'slow' );
},
function() {
timer = setTimeout(function() {
$('.subnav--main').fadeOut( 'fast' );
$('.promoted-content--main').fadeOut( 'fast' );
}, 1000);
});`

Related

Show popup on hover only if i hover on li after 1 second

I'm trying to show inner div on hover on li. I'm doing fadeIn and fadeOut effect but the problem is when I hover quickly on all li fadeIn effect work for all. Where it should show only if I hover on li for 1 second and if I leave that element before one second it shouldn't show fadein effect.
<script type="text/javascript">
$(document).ready(function(){
var _changeInterval = null;
$( ".badge_icon" ).hover(function() {
clearInterval(_changeInterval)
_changeInterval = setInterval(function() {
$(this).find(".badges_hover_state").fadeIn(500);
}, 1000);
},function() {
$(this).find('.badges_hover_state').fadeOut(500);
});
});
</script>
I have tried to use stop(), delay() also but didn't get success. At last I tried to do with time interval but now my code has stopped working.
you could use this jquery script:
var myTimeout;
$('#div').mouseenter(function() {
myTimeout = setTimeout(function() {
//Do stuff
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
});
See the DEMO
Was able to solve this issue by adding window in front of variable name.
var myTimeout;
$('.div').mouseenter(function() {
window.el = $(this);
myTimeout = setTimeout(function() {
el.css("width","200px");
}, 1000);
}).mouseleave(function() {
clearTimeout(myTimeout);
el.css("width","100px");
});

stop my script focussing on the div I'm fading out when it's not visible on the page

I have a div, inside which I'm using as a slide show. It all works fine but when the page is scrolled so the slideshow isn't in view, and the fadeIn animation happens then the page auto scrolls to show the animation. Is there anyway to stop this?
I'm really newbie with javascript :(
window.setInterval(function(){
if(fader < <?php echo count($homePageFavs);?>) {//it's not the last image so we can move right
var newFade = fader;
newFade++;
$(".fader_"+fader).fadeOut( "slow", function() {
// Animation complete.
$(".fader_"+newFade).fadeIn( "slow", function() {
// Animation complete
});
});
fader = newFade;
} else { // loop back to the first one
$(".fader_"+fader).fadeOut( "slow", function() {
// Animation complete.
$(".fader_1").fadeIn( "slow", function() {
// Animation complete
});
});
fader = 1;
}
}, 10000);

Perform multiple clicks as long as user is hovering over an element in jQuery

I have the following jQuery. What it does is that once you hover over the next or previous arrows, it clicks on them, making the slider move. I need to modify this code, so it keeps clicking as long as you are hovering, right now, it only does it once.
$( "#slider .next, #slider .prev" ).hover(
function() {
$(this).click();
},
function() {}
);
The slider uses a jQuery plugin called Tiny Carousel
Thanks
This will trigger a click on the elements every second:
var clr;
$(".next, .prev").hover(function (e) {
clr = setInterval(function () {
$(e.target).click();
}, 1000)
}, function () {
clearInterval(clr);
});
jsFiddle example
var handle=null;
$( "#slider .next, #slider .prev" ).hover(
function() {
var self=$(this);
if(handle!=null)
clearInterval(handle);
handle = setInterval(function(){
$(this).click();
},100);
},
function() {}
);

Toggle animation on click of div?

please look at this fiddle http://jsfiddle.net/rabelais/4X63B/3/
In this fiddle when one hovers on the bars the animations start and stop. I want to know how to change this Jquery code so that the animation starts and stops on click instead? Also when one animation is started and the user clicks on the other bar it will pause to. At the end of each animation a refresh button is display to reset the animation.
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()}, ($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})
});
$('#refresh-1').click(function(){
$('.alt0').width(0);
$(this).hide();
})
$('#one').mouseleave(function(){
$('.alt0').stop()
});
Try
$('#one').on('click', function () { //when first is clicked
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active'); //remove seconds active class
if ($(this).hasClass('active')) { //check if clicked item has active class
$('.alt0').stop(); //stop animation
$(this).removeClass('active'); //remove active class
} else { //if not active or animating
$(this).addClass('active'); //add active class
$('.alt0').animate({ //start animation
width: $(this).width()
}, ($(this).width()) / 2 * 1000, "linear", function () {
$("#refresh-1").show();
});
}
});
$('#refresh-1').click(function () {
$('.alt0').width(0);
$(this).hide();
})
Similarly do the same for second bar. If you dont want another bar to stop animating on click of other bar
just remove the part from code
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active');
$('.alt0').stop(); //stop firstanimation
$('#one').removeClass('active');
Full example http://jsbin.com/UseTIji/1/
First change mouseenter to mouse click
$('#one').mouseenter(function() → $('#one').click(function()
Enter some variable that will change on every click:
var oneIsPlayed = false
$('#one').click(function() {
oneIsPlayed = !oneIsPlayed;
if ( oneIsPlayed ) {
//code to stop
} else {
//code to start animation
}
})
Breaking down the code:
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
This is the part that starts the animation when the mouse enters the element. You can change it so the animation starts on a mouse click by changing it to click:
$('#one').click(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
You can do the same with the stop animation component:
$('#one').click(function(){
$('.alt0').stop()
});
If you want to make a click on one bar stop the animation on the other, you can add a stop method call to the start animation call:
e.g.
$('#two').click(function(){
$('.alt1').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-2").show();
$('.alt0').stop();
})});
It seems that you jsfiddle isn't loading for me at the moment, so I can't test. But I hope that can get you in the right direction.
On click of that div, applying animation. Give some duration for that animation and when the duration get over you can get its callback so then remove that style.
$(document).ready(function () {
$('#service').click(function () {
$("#ServiceSublist").animate({opacity: 0.25,
left: "+=50",
height: "toggle"
}, 1000, function() {
alert("amination complete");
});
});
});

css-opacity issue

I have a jQuery cycle script (which I wrote, so it's not high quality) that basically cycles <li> elements by animating their opacity. For example, say I have three <li> elements. The script would set the opacity of all elements but the first one to 0, then when a "next" button is clicked, it will animate the opacity of the first one to 0, then animate the opacity of the second one to 1, and so forth. At the same time, I have a setInterval running that literally clicks the "next" button every four seconds.
The problem is, if the user clicks the "next" button at the same time as the setInterval pushes it, the opacity of the elements messes up, and some elements end up on top of each other.
Could anyone suggest a solution? Would it work better if I used the .hide() function instead of the .css('opacity')?
EDIT: This is the code
$('ul#news > li').css({opacity:0.0}).filter('ul#news li.firstNews').css({opacity:1.0});
$('#newsLeft').click(function() {
var $active = $('ul#news li.active');
var $next = $active.next().length ? $active.next() : $('ul#news li.firstNews');
$active.animate({opacity:0.0}, 300, function() {
//when done animating out, animate next in
$next.css({opacity:0.0})
.animate({opacity: 1.0}, 400, function() {
$active.removeClass('active');
$next.addClass('active');
});
});
return false;
}); //clickRight
Reset the animation timer when the next-button is hovered. Example below.
var animTimerDelay = 4000,
animTimerID = null;
function animTick() {
// Animation code here
resetTimer();
}
function resetTimer() {
if (animTimerID !== null) {
clearTimeout(animTimerID);
}
animTimerID = setTimeout(animTick, animTimerDelay);
}
prevent mouse event during animation.
every time I use this method.
like,
$('#newsLeft').click(function() {
if($(this).hasClass('blockEvent')) return false; // return if it's locked
$(this).addClass('blockEvent'); // lock it with 'blockevent' class
var $active = $('ul#news li.active');
var $next = $active.next().length ? $active.next() : $('ul#news li.firstNews');
$active.animate({opacity:0.0}, 300, function() {
//when done animating out, animate next in
$next.css({opacity:0.0})
.animate({opacity: 1.0}, 400, function() {
$active.removeClass('active');
$next.addClass('active');
$('#newsLeft').removeClass('blockEvent'); // unlock after all animations
});
});
return false;
}); //clickRight
good luck :)

Categories

Resources