We Keep Coding

How to add a delay to after click [duplicate]

This question already has answers here:
Jquery Delay After Click
(7 answers)
Closed 8 months ago.
How to add a 2 second delay to the scrollbar.init after the #menu-toggle-close button is clicked?
$('#menu-toggle-open').click(function () {
scrollbar.destroy(document.body)
})
$('#menu-toggle-close').click(function () {
scrollbar = Scrollbar.init(document.body, { delegateTo: document, alwaysShowTracks: true, speed: 0.7, damping:0.1, });
scrollbar.addListener(ScrollTrigger.update);
ScrollTrigger.defaults({ scroller: document.body });
})});

You can use setTimeout for this purpose. the second argument takes the delay in milliseconds, in this case it will be 2000 for 2 seconds.
$('#menu-toggle-close').click(function () {
setTimeout(() => {
scrollbar = Scrollbar.init(document.body, { delegateTo: document, alwaysShowTracks: true, speed: 0.7, damping:0.1, });
scrollbar.addListener(ScrollTrigger.update);
ScrollTrigger.defaults({ scroller: document.body });
}, 2000)
})});

standard function works fine but if delegated - does not [duplicate]

This question already has an answer here:
How to delegate `hover()` function by using `on()` [duplicate]
(1 answer)
Closed 3 years ago.
this works fine:
$('.rollwrap').hover(function() {
$(this).find('.imgrollb').animate({'bottom' : 0});
}, function() {
$(this).find('.imgrollb').animate({'bottom' : '100%'});
}
);
if rollwrap and its content is added dinamically I need to delegate the function but this doesn't work:
$(document).on('hover', '.rollwrap', function(){
$(this).find('.imgrollb').animate({'bottom': 0});
}, function(){
$(this).find('.imgrollb').animate({'bottom': '100%'});
}
);
How to get the same funcionality with dinamic content?

The two functions passed to .hover are mouseenter and mouseleave handlers, so you can delegate with those events instead:
$(document).on('mouseenter', '.rollwrap', function(){
$(this).find('.imgrollb').animate({'bottom': 0});
});
$(document).on('mouseleave', '.rollwrap', function(){
$(this).find('.imgrollb').animate({'bottom': '100%'});
});

jQuery show div for 2 seconds then hide for 4 seconds in a loop [duplicate]

This question already has answers here:
What is the difference between a function call and function reference?
(6 answers)
Closed 5 years ago.
How to show a div for 2 seconds and then hide it for 4 seconds in an infinite loop? I use jQuery's animate() function because I want to use CSS transitions too.
function animatedText() {
setTimeout(function() {
$('.text').animate({ opacity: 1 }, 200, function() {
setTimeout(function() {
$('.text').animate({ opacity: 0 }, 200);
}, 1800);
});
}, 3800);
}
setInterval(animatedText(), 6000);
Here is my fiddle : https://jsfiddle.net/od6gm8t3/

I hope this will help you. Please check below code.
function animatedText() {
$('.text').animate({ opacity: 1 }, 200, function() {
setTimeout(function() {
$('.text').animate({ opacity: 0 }, 200);
}, 2000);
});
setTimeout(function() {
animatedText();
},6000);
}
animatedText();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="text">Animated Text</i>

jQuery - Waiting 2 seconds before hiding [duplicate]

This question already has answers here:
Add delay before .hide() w/jQuery
(2 answers)
Closed 8 years ago.
So, in my code the function is supposed to make #aboutPopOut slide to the left and then after 2 seconds, the fadescreen to .hide(). The sliding works, but the waiting and hiding does not. Here is my function;
function aboutHide() {
$("#aboutPopOut").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#fadeScreen").wait(2).hide();
}, 500);
};
Please help me figure out what is wrong. All responses will be appreciated.

You are looking for the .delay method. You also have to pass a number to .hide to make it an animation method, otherwise .delay has no effect.
$("#fadeScreen").delay(2000).hide(0);

try this
function aboutHide() {
$("#aboutPopOut").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#fadeScreen").delay(2000).hide();
}, 500);
};

Update the following..
function aboutHide() {
$("#aboutPopOut").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#fadeScreen").delay(2000).hide();
}, 500);
};

Javascript not selector [duplicate]

This question already has answers here:
"All but not" jQuery selector
(7 answers)
Closed 8 years ago.
i am noob at this one so I wanted to ask you if you maybe know how to select all elements except one.
Here is script:
<script type="text/javascript">
var jump = function (e) {
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $(this).attr("href");
//perform animated scrolling
$('html,body').animate({
//get top-position of target-element and set it as scroll target
scrollTop: $(target).offset().top
//scrolldelay:1 seconds
}, 1000, function () {
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
$(document).ready(function () {
$('a[href*=#]').bind("click", jump);
return false;
});
</script>
<!-- // end of smooth scrolling -->
And I want to do same effect on all links except #myCarousel . Question is how to do that and where needs to be included :not selector in script.
Thanks in advance.

you could use .not(), like:
$('a[href*=#]').not('#myCarousel').bind("click", jump);

You can use :not in the selector itself.
$('a[href*=#]:not(#myCarousel)').bind("click", jump);