I've wanted to do smooth transition between tabs (first fadetoggle, then change content, fadetoogle again), but "changing content" part doesn't wait for the animation to finish. I.e. content changes before finishing the animation
$('.catalog__wrapper').fadeToggle('slow', executeTabChange(tab, () => $('.catalog__wrapper').fadeToggle()))
Link to jsfiddle
https://jsfiddle.net/Denchuk10111/cowypes2/34/
Something like this
$(document).ready(function() {
$('ul.catalog__tabs').on('click', 'li:not(.catalog__tab_active)', function() {
const tab = $(this);
$('.catalog__wrapper').fadeOut('slow', () => {
executeTabChange(tab, ()=>{
$('.catalog__wrapper').fadeIn()
});
});
});
function executeTabChange(form, callback) {
form
.addClass('catalog__tab_active').siblings().removeClass('catalog__tab_active')
.closest('body').find('div.catalog__content').removeClass('catalog__content_active')
.eq(form.index()).addClass('catalog__content_active');
callback();
}
})
Related
I have a problem with the script jquery:
I have a paragraph of an e-mail. When I click on it. I want the text changed to "Copied to clipboard" with fade effect. After 3 seconds returned the original text with fade efect
I have a problem back to the original text (link)
try this in click event
$('.icon-email').click(function () {
var email =$(this).text();
$(this).fadeOut(500, function() {
$(this).text('Copied to clipboard').fadeIn(500,function()
{
$(this).fadeOut(3000, function() {
$(this).text(email).fadeIn(500);
});
});
});
});
you can use the animate function for the above requirement:
$('.icon-email').click(function () {
$(this).animate({opacity:0},function(){
$(this).text("new text")
.animate({opacity:1},3000); //3000 is the speed that you wanted to fade in and fade out
})
});
I inherited this modal/overlay/content close/empty method that works, but abruptly:
method.close = function () {
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
To fade out gradually, I modified the method like below, but elements are left behind and subsequent clicks don't open new modals loaded with content, only the overlay:
method.close = function () {
$modal.fadeOut('slow', function() {
$(this).hide();
});
$overlay.fadeOut('slow', function() {
$(this).hide();
});
$content.fadeOut('slow', function() {
$(this).empty();
});
$(window).unbind('resize.modal');
};
What am I missing?
UPDATE: The solution is a single nested callback, based on garryp's answer, like this:
method.close = function() {
$overlay.fadeOut('slow', function() {
$overlay.hide();
$content.empty();
});
$modal.hide();
$(window).unbind('resize.modal');
};
Hide is asynchronous; the calls you have in your original code do not block while the transition occurs, execution moves immediately to the next. You need to use callbacks, like this:
var me = $(this); //Added to ensure correct this context
$modal.fadeOut('slow', function () {
me.hide(function () {
$overlay.fadeOut('slow', function () {
me.hide(function () {
$content.fadeOut('slow', function () {
me.empty();
});
});
});
});
});
Assuming the rest of your code is correct this should ensure the transitions fire one after the next.
Firstly, you do not need $(this).hide(). JQuery fadeOut automatically set display: none at the end of fading animation (read more: http://api.jquery.com/fadeout/).
That mean, in your case $content element will also have display: none after fadeOut animation. I expect you forgot to add $content.show() in modal open method.
I made this script to fadeout and fadein (fadeTo) a div when I hover another div, it's almost working perfect but when I quickly hover in and out the div the script keeps looping until it reaches the times I hovered it.
Is it possible to stop (timeout?) the fadeOut/FadeIn effect till the loop is completed? So it stops repeating with a quick hover in and out but that the script works again when the loop is finished
jsFiddle: (quickly hover in and out the red part a few times, you'll notice the text keeps going)
http://jsfiddle.net/v69Jk/
$(function () {
$('.one').hover(function () {
$('.show').fadeTo(600, 0);
},
function () {
$('.show').fadeTo(600, 1);
});
});
Solution 1: cancel the previous animation:
$(function () {
$('.one').hover(function () {
$('.show').stop().fadeTo(600, 0);
},
function () {
$('.show').stop().fadeTo(600, 1);
});
});
Demo
Solution 2: stop event when the animation is not done yet (as you wanted, but this might not work properly because of the hover function)
$(function () {
$('.one').hover(function () {
if (!$('.show').is(':animated')) {
$('.show').fadeTo(600, 0);
}
},
function () {
if (!$('.show').is(':animated')) {
$('.show').fadeTo(600, 1);
}
});
});
Demo
I have a button that fades in some html file, and then a back button that returns the user to initial view. However this only works once. They are unable to click the button again for a more detailed view.
$('.support').click(function () {
$('.main-view').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/support.html');
});
});
$('.back').click(function () {
$('.return-main').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/main-view.html');
});
});
If .back element is generated dynamically, you should delegate the event:
$('.main-view-wrapper').on('click', '.back', function(){
$('.return-main').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/main-view.html');
});
})
$(document).on('click', '.support', function () {
$('.main-view').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/support.html');
});
});
$(document).on('click', '.back', function(){
$('.return-main').fadeOut('slow', function () {
// Animation complete.
$('.main-view-wrapper').load('includes/modules/main-view.html');
});
})
After you've clicked both buttons, you've faded out both .main-view and .return-main, but you never fade them back in. So nothing will happen on the next click. Do you need to fade them in on click of the opposite button?
I am working on a nested menu, and when my mouse move over a option, a sublist will show up.
Here is my hover function:
$( ".sublist" ).parent().hover( function () {
$(this).toggleClass("li_hover",300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
Now, I want add a short period before the sublist shows up to prevent the crazy mouse moving from user. Does somebody have a good suggestion on this?
Update:
Thanks for you guys, I did a little bit change on my program, recently it looks like this:
function doSomething_hover (ele) {
ele.toggleClass("li_hover",300);
ele.find(".sublist").toggle("slide", {}, 500);
}
$(function () {
$( ".sublist" ).parent().hover( function () {
setTimeout(doSomething_hover($(this)), 3000);
});
}):
This is weird that setTimeout will not delay anything. but if I change the function call to doSomething_hover (without "()"), the function will delay good. but i can not pass any jquery element to the function, so it still not works, could somebody tell me that how to make doSomething_hover($(this)) work in setTimeout ?
Update 2:
Got the setTimeout work, but it seems not what I want:
What I exactly want is nothing will happen, if the mouse hover on a option less than 0.5sec.
Anyway, here is the code I make setTimeout work:
function doSomething_hover (ele) {
ele.toggleClass("li_hover",300);
ele.find(".sublist").toggle("slide", {}, 500);
}
$(function () {
$( ".sublist" ).parent().hover( function () {
var e = $(this);
setTimeout(function () { doSomething_hover(e); }, 1000);
});
}):
Final Update:
I got this work by using clearTimeout when I move the mouse out.
so the code should be:
$( ".sublist" ).parent().mouseover( function () {
var e = $(this);
this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
});
$( ".sublist" ).parent().mouseout ( function () {
if(this.timer){
clearTimeout(this.timer);
}
if($(this).hasClass("li_hover")){
$(this).toggleClass("li_hover");
}
$(this).find(".sublist").hide("slide", {}, 500);
});
This is the part in the $(document).ready(). Other code will be same as above.
真. Final Update:
So, mouseover and mouseout will lead to a bug sometime, since when I move the mouse to the sublist, the parents' mouseover event will be fire, and hide the sublist.
Problem could be solved by using hover function:
$( ".sublist" ).parent().hover(
function () {
var e = $(this);
this.timer = setTimeout(function () { doSomething_hover(e); }, 500);
},
function () {
if(this.timer){
clearTimeout(this.timer);
}
$(this).find(".sublist").hide("slide", {}, 500);
if($(this).hasClass("li_hover")){
$(this).toggleClass("li_hover",300);
}
}
);
Thanks all
Try this please:
Code
setInterval(doSomthing_hover, 1000);
function doSomthing_hover() {
$(".sublist").parent().hover(function() {
$(this).toggleClass("li_hover", 300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
}
SetTime vs setInterval
At a fundamental level it's important to understand how JavaScript timers work. Often times they behave unintuitively because of the single thread which they are in. Let's start by examining the three functions to which we have access that can construct and manipulate timers.
var id = setTimeout(fn, delay); - Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time.
var id = setInterval(fn, delay); - Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled.
clearInterval(id);, clearTimeout(id); - Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring.
In order to understand how the timers work internally there's one important concept that needs to be explored: timer delay is not guaranteed. Since all JavaScript in a browser executes on a single thread asynchronous events (such as mouse clicks and timers) are only run when there's been an opening in the execution.
Further read this: http://ejohn.org/blog/how-javascript-timers-work/
timeout = setTimeout('timeout_trigger()', 3000);
clearTimeout(timeout);
jQuery(document).ready(function () {
//hide a div after 3 seconds
setTimeout( "jQuery('#div').hide();",3000 );
});
refer link
function hover () {
$( ".sublist" ).parent().hover( function () {
$(this).toggleClass("li_hover",300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
});
}
setTimeout( hover,3000 );
....
You could use .setTimeout
$(".sublist").parent().hover(function() {
setTimeout(function() {
$(this).toggleClass("li_hover", 300); //use to change the background color
$(this).find(".sublist").toggle("slide", {}, 500); //sub list show / hide
}, 1000);
});