I am looking for an way to loop a function as long as an animation is executed.
The reason is: I created an UI-Layout within a parent div. The parent div changes it's width due to an animation. The problem is that the UI-Layout doesn't adjust to the parent's width.
By calling $(window).trigger('resize'); when the animation is finished the UI Layout adjusts to the new width.
But I now want the layout to adjust smoothly to the animation so that the UI-Layout grows in an animated way (just like the parent div).
So my idea was to loop $(window).trigger('resize'); as long as the animation of the width of the parent div is playing.
What is the best way to loop a function while the animation is playing?
Or are there better ways to achieve what I am looking for?
Thanks so much!
You can use the jQuery .animate(properties, options) syntax, which allows you to listen to the progress event.
Example:
$( "#book" ).animate({
width: "+=50px" // whatever CSS properties that are animated...
}, {
duration: 500,
progress: function() { // This gets called several times during the animation
$(window).trigger('resize');
}
complete: function() {
$(window).trigger('resize');
}
});
CSS transitions
If you are using pure CSS transitions, then right after you launch the transition, you could call this function, passing it the element that is being animated:
function manageResize(elem) {
var timer = setInterval(function () {
$(window).trigger('resize');
}, 50);
elem.addEventListener('transitionend', function () {
clearInterval(timer);
}, false);
}
This will resize the window every few milliseconds (adjust as needed) and stop doing that once the transition comes to an end.
If you're using jQuery animation, a way would be:
var animating = true;
$( elem ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
animating = false;
});
var timer = setInterval(function(){
if(animating)
$(window).trigger('resize');
else
clearInterval(timer);
},50);
Or, if you're using CSS animation:
// start animation
var animating = true;
$( elem ).addClass("animating");
$( elem ).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
animating = false;
});
var timer = setInterval(function(){
if(animating)
$(window).trigger('resize');
else
clearInterval(timer);
},50);
Related
I was wondering if I can detect native scrollbar's left/right or up/down buttons click event. I want to know because I want to give a custom behaviour of the scrollbar, like scroll only in some fixed steps etc. I have used scroll function, but it doesn't exactly give me the smoothness I wanted:
var step = 200;
var nextPos=-1;
var pos;
var scrolltarget;
$(' .scrollable ul').scroll(function(e){
clearTimeout($.data(this, 'scrollTimer'));
scrolltarget=$(this);
$.data(this, 'scrollTimer', setTimeout(function() {
pos=scrolltarget.scrollLeft();
if(pos%step!=0){
if(pos>nextPos){
scrolltarget.animate({
scrollLeft: pos-pos%step+step
},250);
}
else if(pos<nextPos){
scrolltarget.animate({
scrollLeft: pos-pos%step
},250);
}
}
nextPos=scrolltarget.scrollLeft();
}, 250));
});
you can use
$( window ).scroll(function() {
// your java script code
});
i recommend you to see this scroll jquery event.
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);
I have a menu with sub items inside it. In order to make animation effect I want, I need to retrieve sub-menu width,height and height of its first-child. Now my animation works ,but sometimes my sub-menu just "pops up" (it doesn't animate its width ).
Here is The Fiddle of the problem.
http://www.vasinternetposao.com/wordpressdevelopment/wp-content/themes/override/images/submenu_problem.png
I am using this code:
var j = jQuery.noConflict();
j(document).ready(function () {
j('ul.nav').removeClass('nav').addClass('jnav'); //Add jquery Class to our menu
j('ul.jnav li').hover(function () {
if (j(this).children('ul:first').hasClass('jsub-menu')) { //Let's check if "jsub-menu" Class is here
return false; //If it is ("jsub-menu" here) don't SlideDown...
} else { //Else slide down if no class
j(this).find('ul.sub-menu:first').not(':animated').slideDown(500);
}
}, function () {
j(this).find('ul:first').slideUp(500, function () {
j(this).removeClass('jsub-menu').addClass('sub-menu');
j(this).css({
'height': '',
'width': ''
});
});
});
j('ul.jnav ul.sub-menu a').hover(function () {
j(this).addClass('active');
if (j('.active').next('ul.sub-menu').length) { //If submenu exist...
j('.active').next('ul.sub-menu').css({
'visibility': 'hidden',
'opacity': '0',
'display': 'block'
}); //Show it so we can read its:
var get_width = j('.active').next('ul.sub-menu').outerWidth(true); //WIDTH
var get_height_of_first_child = j('.active').next('ul.sub-menu').children('li:first').outerHeight(true); //HEIGHT of its First Child
var get_submenu_height = j('.active').next('ul.sub-menu').outerHeight(true); //HEIGHT of our menu
j('.active').next('ul').removeClass('sub-menu') //Remove class from menu, add another class apply HEIGHT of FIRST CHILD and hide it again...
.addClass('jsub-menu').css({
'visibility': '',
'opacity': '',
'height': get_height_of_first_child + 'px',
'width': '0'
});
j('.active').next('.jsub-menu').animate({
width: get_width
}, 1000, function () { //Animate WIDTH
j('.active').next('.jsub-menu').animate({
height: get_submenu_height
}, 1000); //callback animate HEIGHT
});
} //End if
}, function () {
j('.active').removeClass('active');
});
});
I think that this is happening because my Slide Up/Down animations are conflicting with my animate with/height functions but I am not sure. I have tried to solve it by adding stop(),stop(true,true),stop(true,false) in numerous combinations but failed. I am trying to solve this for days now so you stackers are my only hope. Please help!
Thank you!!
I was finally able to replicate the error.
I wrote this code for you, to replace the code you have for the animation.
var animating = false;
function animate($elm, options, callback) {
if (animating)
return;
animating = true;
$elm.animate(options, 1000, function() {
animating = false;
if (callback != undefined)
callback();
});
}
Call it like this, from inside your hover callback.
animate(j('.active').next('.jsub-menu'),
{
'width': get_width,
'height' : get_submenu_height
});
Basically, it checks if another animation is already running, in which case it doesn't start it. The Flag is set to false when the animation stopped, and let's other animations go on.
You can also pass a callback to do something after the animation is completed, but in your case you don't need it, because you can animate the height and width in the same time.
I tested it for like a minute and it looked pretty smooth.
Here is the updated feedle: http://jsfiddle.net/gabrielcatalin/TNxJ4/1/
P.S. You may also want to use the $ sign instead of 'j' for jQuery wrappers.
How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/
i am very new at jquery and code, here i am trying to get the setTimeout event to be inside the .mouseout event but i'm not sure how to do that as i keep getting syntax error in my editor. Here's what i have:
jQuery(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout()
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
A small nuance, in this code the user mouses over a div, then another div bellow it slides down. Moving the mouse to the .slidedown div should keep it open until the mouse is removed. But will this code collapse the .slidedown div if the user doesn't mouse over .slidedown after .trigger but instead moves the mouse directly from .trigger to another area of page? I.e i need some kind of 'setTimeout' that is trigged only if the user doesn't move mouse over .slidedown after hovering over .trigger. Hope i make sense. Thanks for your help!
This line is the problem
$('.slidedown').mouseout()
It shoule be
$('.slidedown').mouseout( YOUR_CALLBACK_FUNCTION )
You should pass a callback function which will act as an event handler and inside that event handler you can call setTimeout() the way you have done it.
So the correct code would look like this
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here
Thanks T.J and Arnab, this works:
$(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here
});
});
But the other thing i mentioned about moving the mouse over .trigger but then away (but not into .slidedown) doesn't work. The .slidedown just remains open. :) :( I think it will be very complex to get a .mouseout event that has a kind of 'allow' rule for one destination of the mouse.