I've implemented a toggle views page, where you can toggle between a list and a grid the animations between toggle states is a bit ugly (toggle using the two links at the top to see what I mean): http://jsfiddle.net/qvLoLhy7/2/
To get around this issue I am trying to apply a setTimeout function on the toggle buttons so that I can fade out the parent div #post-list first, then perform the layout change and then finally fade #post-list back in again to show the updated layout. When I implement this though the fade in/out works but the layout doesn't change: http://jsfiddle.net/qvLoLhy7/
Can anybody help find out why this might be happening?
Here's a snippet of the JS:
function init() {
optionSwitch.forEach( function( el, i ) {
el.addEventListener( 'click', function( ev ) {
$('#post-list').addClass('go'); // Fade out
setTimeout(function() {
_switch( this ); //Update layout. Switch refers to another function
}, 500);
setTimeout(function() {
$('#post-list').removeClass('go'); // Fade new layout back in
}, 1000);
}, false );
} );
}
You are using jquery yet you are not really using jquery. Jquery comes with a fadeIn and fadeOut animation that you can use.
var $pl = $('#post-list');
$pl.fadeOut('slow', function(){
//call back when animation is done
//here you can apply layout changes
$pl.fadeIn('slow', function(){
//call back when the fade in animation is done
//do other stuff here
});
});
Here is a basic example.
You should also transform your code to the jquery equivalent.
Let me know if this is what you were looking for.
Related
I use this code to make bootstrap dropdown show when mouse hover
var bMobile; // true if in mobile mode
// Initiate event handlers
function init() {
"use strict";
// .navbar-toggle is only visible in mobile mode
bMobile = $('.navbar-toggle').is(':visible');
var oMenus = $('.navbar-nav .dropdown'),
nTimer;
if (bMobile) {
// Disable hover events for mobile
oMenus.off();
} else {
oMenus.on({
'mouseenter touchstart': function(){
event.preventDefault();
clearTimeout(nTimer);
oMenus.removeClass('open');
$(this).addClass('open');
},
'mouseleave': function() {
nTimer = setTimeout(function() {
oMenus.removeClass('open');
}, 500);
}
});
}
}
$(document).ready(function() {
// Your other code to run on DOM ready...
init();
});
$(window).resize(init);
I use this code to remove hover effect from small screens and work on big screens
How can make this code slide animation ?
and if there is code better than this code please add it in comment
I am bad in English, sorry :)
I recommend using the http://daneden.github.io/animate.css/ project, and adding the css class you want, i'll try to throw together a quick example
Here's a quick and dirty demo
$($(this).find(".dropdown-menu")[0]).addClass('bounceInUp animated');
http://jsfiddle.net/L8nz8zk2/1/
you would want to use something like this to handle the mouse events (no need for the $.on()):
http://api.jquery.com/hover/
so your code would look something like this.
$('CSS SELECTOR OF THE ITEM TO HOVER OVER').hover(function(){
$('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE DOWN').slideDown();
},function(){
$('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE UP').slideUp();
});
The Jquery animation of slideDown() and slideUp() is what you're looking for, and this combined with the .hover() jquery event handler should be able to give you what you need.
you can lose the .on() calls.
This is more or less a basic jQuery-Question.
The following is my problem:
I have a mouseenter-function. so when I enter the specific container, an animation starts. the problem is, when i enter this container for example 10 times in a few seconds, then the animation is repeated and repeated… but i only want it one time… hope you understand.
here is an video to demonstrate my problem:
http://youtu.be/5Cb0qHKtl_c
Or look here:
http://jsfiddle.net/meNK5/
$('.project').mouseenter(function() {
$( this )
.find('.info').fadeIn(200);
$( this )
.find('div.image').fadeTo( "slow", 0.15 );
});
$('.project').mouseleave(function() {
$('.info').fadeOut();
$( this )
.find('div.image').fadeTo( "slow", 1 );
});
what do i have to do, to regulate the animation?
You should use jquery's stop to stop the previous animation before starting a new one:
http://jsfiddle.net/meNK5/1/
$( this ).find('.info').stop(true,true).fadeIn(200);
An easy way of doing it (maybe not the most proper way), is to set a variable on your mouseenter function, and disable it at the end of your animation. Something like (this is pseudo code):
var active = 0;
$('#myObject').mouseenter(function() {
if(active == 0) {
active = 1;
startAnimation();
}
}
function startAnimation(){
// start my animation
...
// end of animation
active = 0;
}
Use .one('mouseenter', myFunc) instead of .mouseenter(myFunc)
http://api.jquery.com/one/
EDIT: If you want to do the animation multiple times, but not have two animations overlap, recommend using .is(':animated');:
$('.project').mouseenter(function() {
if(! $(this).is(':animated')) {
// start a new animation ...
}
});
A bit more involved solution which could give you more control is the following: introduce two different states to your object, most easily accomplished by using a class with (.toggleClass()). jQuery does something similar under the hood for ':animated'.
I have a tooltip that appears when you mouseover a link. I want the tooltip to stay if you hover over it (because there are links and such in it), or disappear if you mouse away from the link.
I tried a couple things, but haven't figured it out. This is my first time building anything serious with jQuery.
The stuff below is what is in the .hover() 'handlerOut' event.
if($(this.a).mouseout())
{
if ($('.tip_container').hover()) {
$('.tip_container').css('display', 'block');
$('.tip_container').mouseleave(function() {
$('.tip_container').remove(0);
});
} else if ($('.tip_container').hover() == false && $(this.a).mouseoff() == true)
{
$('.tip_container').remove(0);
}
}
>>"this.a" refers to the link<<
With this and the other things I've tried the tooltip doesn't disappear unless you mouse over the off of it. I also tried
else if (!$('.tip_container').hover() && $(this.a).mouseoff()) {
Is it possible to have multiple conditions?
The main idea of the code is that if you mouse off of the link "this.a" the tooltip will be removed by:
$('.tip_container').remove(0);
but if you mouse over the tooltip it will not be removed until you mouse off of the tooltip.
Do you have a fiddle or anything to demonstrate?
Maybe something like
$(this, '.tip_container').hover(function () {
$('.tip_container').show();
}, function () {
$('.tip_container').hide();
}
);
Basically bind both the link and the tooltip elements to the hover method, which hides/shows the tooltip element on mouseenter/mouseleave. The link Pointy posted in comments is a good place to start
After a good nights rest and ignoring it for a while I figured out a solution. This is what I put in the hover handlerOut event.
var timer;
timer = setTimeout(function() {
$('.tip_container').remove();
}, 500);
$( '.tip_container' ).hover(
function() {
clearTimeout(timer);
$('.tip_container').css('display', 'block');
}, function() {
$('.tip_container').remove();
}
);
On the hover out of the link it will wait before executing the remove and if the mouse hovers over the tooltip it will clear the timer and set the tooltip to block to keep it displayed then on that hover out of the tooltip it will be removed.
Here is a jquery drop down i am trying to make: http://jsfiddle.net/qYMq4/2/
Basically i just want a div to drop down when a user mouses over a link and stay down unless i mouse away from the link or over the dropped down div and then away from the div. So it is almost like a standard drop down menu that you see in alot of website navigation, but this just has a bit of animation so it doesn't appear instantly.
I'm finding it terribly difficult, as you can see it doesn't quite function correctly. Any adivce? Thanks for your input.
You can see a working demo of the following here.
I prefer mouseenter[DOCS] and mouseleaveDOCS in this situation as it behaves better when hovering over children. I restructured your HTML so that the hover is over the parent div of the link, so that when you hover over the gray area that slides down it's not considered a mouseleave as follows:
<div class="mask-layer">
<a class="top-link-cart" href="http://www.w3schools.com/">Test</a>
<div class="slidedown">div should close if user moves mouse away from test (but not to the gray area) or away from the gray area. The .mouseout function doesn't appear to work. </div>
</div>
I then restructured your Javascript to use .mask-layer for the hover events, and simplified the animation with slideUp[DOCS] and slideDown[DOCS] as follows:
$('.slidedown').hide();
$('div.mask-layer').mouseenter(function() { // enter animation
$('.slidedown').slideDown(600);
}).mouseleave(function() {
setTimeout(function() {
$('.slidedown').slideUp(600);
}, 200);
});
You can use the slideDown() and slideUp() methods - they're a littler easier to work with. You'll also want to use the windowSetTimeout. A lesser known feature is that it returns a number which will allow you to cancel the timeout. You can use that to keep the div open in the event the user scrolls down onto it. Some inspiration for this approach borrowed from here: http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
$(document).ready(function() {
$('.slidedown').hide();
var timeout = 500;
var closetimer = 0;
$('a.top-link-cart, .slidedown').mouseover( function(){
cancel_timer();
$('.slidedown').slideDown(1000);
});
$('a.top-link-cart, .slidedown').mouseout( function(){
closetimer = window.setTimeout(function(){$('.slidedown').slideUp(1000)}, timeout);
});
function cancel_timer(){
if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;
}
}
});
http://jsfiddle.net/P567S/7/
if you are looking for a click action dropdown menu here it is
//toggle navbar on click.
$('//my link').click(function(event) {
event.stopPropagation();
$('//sub menu container').toggle();
});
//to close dropdown menu when clicked out it.
$(document).click(function() {
$('//sub menu container').hide();
});
hope it works for you..... !!
I have a basic div element to represent a message that I show for a few seconds and then fade it out using
$('#message').fadeOut(5000);
I want to be able to cancel the fade out if the user hovers their mouse over the div.
How can I cancel the fade out once the fadeOut method has started to fade the div?
My existing code, below, works if the mouse enters the div whilst it is being shown but I need to allow for if the user hovers over the div once it has started to fade.
$('#message').mouseenter(function() {
clearTimeout(this.timeout);
});
$('#message').mouseleave(function() {
this.timeout = setTimeout("$('#message').fadeOut(5000)", 3000);
});
$('#message').fadeIn(2000, function() {
this.timeout = setTimeout("$('#message').fadeOut(3000)", 3000);
});
Check out the stop function
http://docs.jquery.com/Effects/stop#clearQueuegotoEnd
Also, you can test if an element is in the middle of an animation using the :animated selector:
$('#message').mouseover(
function () {
if($(this).is(':animated')) {
$(this).stop().animate({opacity:'100'});
}
}
);
In my case stop() merely didn't work at least in Firefox, after searching I figured out that It should be stop(true, true):
$('#message').mouseover(
function () {
$(this).stop(true, true).fadeOut();
}
);
stop(): Stops the currently-running animation on the matched elements.
or even you can use finish() instead:
$('#message').mouseover(
function () {
$(this).finish().fadeOut();
}
);
but there is a side effect about finish(), it stops all other running animations too.
finish(): Stops the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
Read more here.