jquery hover on and off issue - javascript

I am using jQuery to hide and show a div on hover of its parent div. It works but the only issue is that when you hover over and off a few times really quick it preforms each fade in and out over and over again untill its completed it as many times as you moved the mouse on and off.
see : http://api.jquery.com/hover/#hover-handlerIn-handlerOut
the first example's demo here if your hover over them all a few times really quick then watch you can see what I mean.
here is my code, Is ther any way to make it more user friendly and not repeat it self so many times?
$(function () {
$('.hide').fadeOut("fast");
$( ".fourth" ).hover(
function() {
$( this ).find('.hide').fadeIn("slow"); ;
}, function() {
$( this ).find('.hide').fadeOut("slow");
}
);
<div class="fourth">
<div class="products">
<h4 class="hide">Laern More</h4>
</div>
</div>

You need to use the .stop() function to stop the previously started animations :
$( ".fourth" ).hover(
function() {
$( this ).find('.hide').stop().fadeIn("slow"); ;
}, function() {
$( this ).find('.hide').stop().fadeOut("slow");
}
);
See the jQuery .stop() documentation for more information.

Use .stop() to stop the currently-running animation and .fadeToggle() to keep the code simple.
$(".fourth").hover(function() {
$(this).find('.hide').stop().fadeToggle("slow");
});
The FIDDLE.

Related

How can I get an effect to fade out before another fades in, with an "if/else" statement in jQuery?

I have been trying different things for a while now, but I'm still unable to get one DIV to fade out, and have another one fade in. I have searched the site, but I'm still new to jQuery, so I don't understand certain syntax and whatnot.
If someone could explain the easiest way to have my code check to see if a DIV is already in-view (probably with an if statement)--if not, having the DIV selected by the user fade in. If one is already in view, have it fade that DIV out, and fade in the newly selected one.
Thanks, again!
Theres a callback for the fadeIn and fadeOut functions in jQuery, you just need to add the code inside that callback:
$( "#willDisappear" ).fadeOut( "slow", function() {
// #willDisappear is Hidden.
$( "#willAppear" ).fadeIn("slow");
});
Or the other way:
$( "#willAppear" ).fadeIn( "slow", function() {
// #willAppear is Visible now.
$( "#willDisappear" ).fadeOut("slow");
});
Javascript uses events, callbacks are just functions you pass to, in this case fadeIn, to use whenever an event is triggered, in this case when fadeIn is complete.
If i understood correctly, you can use the :visible selector to check the visibility of an element to hide it using fadeOut and show the other element using fadeIn in the callback of fadeOut function.
$('input').click(function(){
if($('#first').is(':visible'))
$('#first').fadeOut('slow',function(){
$('#second').fadeIn('slow');
});
else
$('#second').fadeOut('slow',function(){
$('#first').fadeIn('slow');
});
});
Demo

Dynamically applying a class to a button unable to do click event

I have two div of width 100% absolutely positioned side by side. On clicking a button I want to slide it to left. Then on clicking on same button I want it to come back to its normal position.
Here is my JsFiddle
The first part works fine, but I am not able to slide it back. The 2nd part of the jQuery code does not work. Can anyone please tell me the reason why its not working and how to make it work
<div class="about-deals">
<span class="view-tomorrow-deal">View Tomorrow Deals</span>
</div>
<div class="deals-image-wrapper">
<div class="deal-container">
<div class="today-deals">
</div>
<div class="tomorrow-deals">
</div>
</div>
</div>
try this JSFiddle
$(document).on('click', '.view-tomorrow-deal', function(event) {
$(this).removeClass('view-tomorrow-deal');
$(this).addClass('view-today-deal');
$(this).text('View Today Deals');
$('.deal-container').animate({left: '-100%'}, 1000);
});
$(document).on('click', '.view-today-deal', function(event) {
event.preventDefault();
$(this).removeClass('view-today-deal');
$(this).addClass('view-tomorrow-deal');
$(this).text('View Tomorrow Deals');
$('.deal-container').animate({left: '0%'}, 1000);
});
That's not really the way to create toggle functionality.
When you attach an event handler, that event handler is attached to any element matching the given selector at that time, changing the class later does not remove the event handler or make event handlers executed on pageload magically start working, unless they are delegated, but that makes very little sense here.
Just toggle the functionality in the same click handler, if needed use a flag etc.
$('.view-tomorrow-deal').click(function (event) {
$(this).text(function(_,txt) {
return txt == 'View Tomorrow Deals' ? 'View Today Deals' : 'View Tomorrow Deals';
});
$('.deal-container').animate({
left: $('.deal-container').position().left === 0 ? '-100%' : '0%'
}, 1000);
});
FIDDLE
Try jQuery toggle
$( "#clickme" ).click(function() {
$( "#book" ).slideToggle( "slow", function() {
// Animation complete.
});
});
or
$("#book").toggle("slide");
Link : https://api.jquery.com/slideToggle/
for slide effect
Stack link : slideToggle JQuery right to left

Stop JWPlayer when hidden the div with the player

I have a site where I'm using a JavaScript to add or remove a css class. Using this method I hide a div or show a div, as I need it. It works great.
The problem is one div opens a Video with a JWplayer, when I hide the "window" or better say, the div. The sound is still playing, so I need a code to put stop on the video when someone clicks the "hide" button or close button.
How do you do that? I have no idea.
Thanks
HTML
<div class="videoquon">
<div class='my-video-close'></div>
<div id='my-video'></div>
<script type='text/javascript'>
jwplayer('my-video').setup({
file: 'qvideo.f4v',
width: '600',
height: '337'
});
</script>
</div>
JavaScript
$('div.vidreveal a').click(
function(event) {
event.stopPropagation();
$('div.videoquon').slideToggle(300);
}
);
$('div.my-video-close').click(
function(event) {
event.stopPropagation();
$('div.videoquon').slideToggle(300);
}
);
I don't know JW Player, but judging by their docs, I'm going to go with
$( 'div.my-video-close' ).click( function( event ) {
event.stopPropagation();
jwplayer( 'my-video' ).stop();
$( 'div.videoquon' ).slideToggle( 300 );
});
...or jwplayer( 'my-video' ).pause(); depending on the desired effect.

How to show/hide a div animatedly?

It is a dumb question, but I can't figure it out..
I want to show the div smoothly (slide down) when a link is clicked and hide it (slide up) when any other part of the page is click or the page is scrolled.
If you can use jQuery, you can work with .slideDown('slow') method for example.
Usage:
$( 'a#myLink' ).click( function() {
$( '#myDiv' ).slideDown( 'fast' );
});
See jsFiddle demo.
Use slideToggle, easier for you:
JSBIN Demo
Slide Toggle

Div transition triggered by a tags

I am playing around with this fiddle I found which is really close to what I am trying to do:
http://jsfiddle.net/5N3YK/20/
The only thing is that when I try to change the section tags to div tags it breaks, and also I want the div's to fade instead of slide.
Help is always greatly appreciated!
Try - http://jsfiddle.net/UDt7q/21/
(function($) {
$.fn.Fader = function() {
this.each(function() {
$('a').bind('click', function(e) {
e.preventDefault();
$( "#hello div" ).fadeOut();
$( "#hello div" + $(this).attr('href') ).fadeIn();
})
});
}
})(jQuery);
Updated fiddle: http://jsfiddle.net/UDt7q/22/
This should work for you:
http://jsfiddle.net/5N3YK/23/
I changed the functionality of the code to hide the divs rather than push them off the page, but the idea is the same.
sections are now divs and they fade rather than slide.
To make something "appear", you can use
$('.selector').fadeIn();
from Jquery. Similarly, you can show(), hide(), fadeOut()

Categories