I am trying to add a delay to the toggleclass 'slidein' however it doesn't seem to be adding to it.
here is my fiddle
and here is my code;
$(function () {
$(".expand").on("click", function () {
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
$(this).next().children('#slidinghold').delay(5000).toggleClass('slidein');
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});
Try this:
$(this).next().children('#slidinghold').delay(5000).queue(function(){
$(this).toggleClass("slidein").dequeue();
});
Fiddle
use setTimeout instead of delay. Sample :
$(".expand").on("click", function () {
$(".expand").next().children('#slidinghold').removeClass('active-expand');
$(this).next().children('#slidinghold').addClass('active-expand');
setTimeout(function () {
$('.active-expand').next().children('#slidinghold').toggleClass('slidein');
}, 500);
});
demo https://jsfiddle.net/anthonypagaycarbon/v1geqa8e/
as said by jQuery's doc
.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases
So you can use window.setTimeout to achieve this:
$(function() {
function toggleClassDelay(element,class,delay) {
window.setTimeout(function() {
element.toggleClass(class)
},delay);
}
$(".expand").on("click", function() {
var el;
$(this).next().slideToggle();
if ($(this).next().css("display", "block")) {
el = $(this).next().children('#slidinghold');
toggleClassDelay(el,"slidein",5000)
}
$expand = $(this).find(">:first-child");
if ($expand.text() == "\u25B6") {
$expand.text("\u25BC");
} else {
$expand.text("\u25B6");
}
});
});
Related
Im trying to write a function that fades X elements out in sequence and once finished run another function.
function fadeOut(pro){
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
$('.opening-title').delay(500).fadeOut();
});
showTimeline(pro);
});
}
function showTimeline(pro){
$('.timeline-container').addClass('in-view');
console.log(pro);
}
For some reason 'showTimeline()' runs at the same time and I can't understand why?
Full JS
$(document).ready(function() {
'use strict';
function init() {
function showPath(pro) {
fadeOut(pro);
}
function fadeOut(pro) {
$('.ul li').each(function(i) {
$(this).find('a').delay(1200 * (i + 1)).fadeOut(200, function() {
$('.title').delay(500).fadeOut();
});
});
showTimeline(pro);
}
function showTimeline(pro) {
$('.container').addClass('in-view');
console.log(pro);
}
$('.path').on('click', function() {
showPath( $(this).attr('data-pro') );
});
} //end init
init();
}); //end doc ready
You are calling showTimeline function in a loop. Call it this way instead ...
function fadeOut(pro) {
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200 * (i + 1)).fadeOut(200, function() {
$('.opening-title').delay(500).fadeOut();
});
});
showTimeline(pro);
}
function showTimeline(pro) {
$('.timeline-container').addClass('in-view');
console.log(pro);
}
You need to wait until all elements are faded. Working Example
But, basically just add a counter to know when all elements are faded:
var hiddenElements = 0;
function fadeOut(pro){
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
$('.opening-title').delay(500).fadeOut();
hiddenElements++;
if (hiddenElements === $('.interactive ul li').length){
showTimeline(pro);
}
});
});
}
You can use jquery when
Hope this snippet will be useful
var fadeOut=function(pro){
$('.interactive ul li').each(function(i) {
$(this).find('a').delay(200*(i+1)).fadeOut(200,function(){
$('.opening-title').delay(500).fadeOut();
});
showTimeline(pro);
});
}
var showTimeline=function(pro){
$('.timeline-container').addClass('in-view');
console.log(pro);
}
$.when(fadeOut()).then(showTimeline());
I am not able to completely test it but you can try this
$(document).ready(function() {
'use strict';
$('.path').on('click', function() {
$.when(fadeOut($(this).attr('data-pro'))).then(showTimeline($(this).attr('data-pro')));
});
function fadeOut(pro) {
$('.ul li').each(function(i) {
$(this).find('a').delay(1200 * (i + 1)).fadeOut(200, function() {
$('.title').delay(500).fadeOut();
});
});
}
function showTimeline(pro) {
$('.container').addClass('in-view');
console.log(pro);
}
});
Im looking for a way to run a function when the other function is ready.
This is the function:
$(".box").first().show(150, function showNext () {
$(this).next(".box").show(150, showNext);
});
So Im look for a way to run another function after that, for example:
alert("Done");
I've tried this but didn't work.
$(".box").first().show(150, function showNext () {
$(this).next(".box").show(150, showNext);
}, function () {
alert("Done");
});
What I want is, in words:
if(all .box is visble or if showNext is idle/completed){
alert("Done");
}
I appreciate any help! Thanks.
How about :
$(".box").first().show(150, function showNext () {
var next = $(this).next(".box");
if (next.length > 0) { // If a next sibling with class "box" was found
next.show(150, showNext);
} else { // No sibling found, end reached
alert("Done");
}
});
I'm new to jQuery and I need a bit of help. I'm using this jQuery script as a testimonial rotator and it works like a charm but I just need to make one small tweak. I need it to be able to pause on hover and then restart when the mouse leaves the div. How can I do this?
This is the script I'm using:
function fadeMyContent() {
$(".testimonial:first").fadeIn(1000).delay(3000).fadeOut(1000,
function() {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}
fadeMyContent();
});
Here is a JSFiddle.
There is a plugin that will provide all the functionality you need and be more reliable called jQuery Cycle 2.
It provides a 'pause-on-hover' option when initialising it.
change the definition of fadeMyContent (also called as destroying function) on hovering on ul#testimonial-rotator and on hover-out change it to old definition again. I have used setTimeout in place of delay because delay is not cancellable.
$(document).ready(function () {
var fadeMyContent;
var t
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
var fadeMyContentDummy = function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent()
});
}
fadeMyContent();
$('#testimonial-rotator').hover(function (e)
{
window.clearTimeout(t)
$('.rotate:first').clearQueue()
fadeMyContent = function () {
return false;
}
},
function (e)
{
fadeMyContent = function () {
$(".rotate:first").fadeIn(1000)
t = setTimeout(function () {
$(".rotate:first").fadeOut(1000,
function () {
$(this).appendTo($(this).parent());
fadeMyContent();
});
}, 3000)
}
fadeMyContentDummy()
})
});
DEMO
Below is a snippet which I need help on. I want to call a function once all the span's have been iterated through. So an example would be if I had 8 spans's, after the 8th span's function has been run, how do I call nextFunction()?
$('#div1').animate({ opacity: '0.2' }, 500, function () {
$('span').each(function () {
//do something.
});
nextFunction();
});
function nextFunction() {
alert("called after the last .each() has occurred");
};
Try $.when()
$('#div1').animate({
opacity: '0.2'
}, 500, function () {
$.when($('span').each(function () {
//do something.
})).then(function () {
nextFunction();
});
});
function nextFunction() {
alert("called after the last .each() has occurred");
};
The code should actually run sequentially, just the way you have written it, unless you're planning to use AJAX requests in the .each() loop.
Something like this
$('#div1').animate({ opacity: '0.2' }, 500, function () {
var doSomething = 0,
ctx = null,
checker = null;
checker = function() {
if (domSomething === $('span').length)
{
clearTimeout(ctx);
nextFunction();
return ;
}
setTimeout(checker, 100);
};
$('span').each(function () {
doSomething += 1;
//do something.
});
checker();
});
.each() is synchronous. It will work the way you have it. See this fiddle
A bit of JQuery taken from http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/ which should give a nice old-twitter style notification.
How do I edit the code below to stop the div hiding on a mouseover?
UPDATE: I still want the div to slideup after the mouseover has finished.
$(function () {
var $alert = $('#alert');
if($alert.length) {
var alerttimer = window.setTimeout(function () {
$alert.trigger('click');
}, 5000);
$alert.animate({height: $alert.css('line-height') || '50px'}, 200).click(function () {
window.clearTimeout(alerttimer);
$alert.animate({height: '0'}, 200);
});
}
});
If I'm understanding correctly (which I'm probably not), you want something like this:
var alerttimer, alertBox = $('#alert');
function resetTimeout() {
if (alerttimer) {
clearTimeout(alerttimer);
}
alerttimer = setTimeout(function() {
alertBox.trigger('click');
}, 5000);
}
$(function () {
if(alertBox.length) {
resetTimeout();
alertBox.animate({ height: alertBox.css('line-height') || '50px' }, 200).click(function () {
window.clearTimeout(alerttimer);
alertBox.animate({ height: '0px' }, 200);
}).mouseover(function () {
clearTimeout(alerttimer);
}).mouseout(function () {
resetTimeout();
});
}
});
It's important to note that the above is very much untested.