I have an issue with my setInterval(), my code is:
var1=0;
function addNum(){
var1++;
$('.number').text(var1);
}
$(function() {
$('.number').text(var1);
jQuery('#box').on('touchstart touchmove', function(e) {
mytimer = setInterval(function(){ addNum() }, 500);
});
jQuery('#box').on('touchend touchcancel', function(e) {
alert('lift up');
window.clearInterval(100);
});
});
I can't clearInterval()
How can I use the same setInterval for the next time?
Somebody knows, how to reuse it?
BR,
Christian
Change your clear function to window.clearInterval(mytimer);
Related
I have the following code that works excellent for a mouseenter event:
$(document).ready(function () {
$(".someClass").mouseenter(function () {
//does some stuff
}).mouseleave(function () {
//does some stuff
});
});
What I am looking for is to change the above so that it is a timed event and does not require the mouse to enter the DIV with the associated class.
Any help would be greatly appreciated.
Regards,
jmcall10
Something like this? (If that's the case, I'll add some comments)
$(function() {
$('.someClass')
.on('mouseenter', function() {
console.log('mouse entered');
})
.on('mouseleave', function() {
console.log('mouse exited');
});
setTimeout(function() { $('.someClass').trigger('mouseenter'); }, 2000);
setTimeout(function() { $('.someClass').trigger('mouseleave'); }, 4000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someClass">Enter your mouse here</div>
First define a timed event: setTimeout(fun, 1000);
Then trigger event which you want in fun: $('.someClass').dispatchEvent(new Event('mouseenter');
May can help you...
How can I have this fiddle to change from first content (mario) to next content (smiley face) without being on hover/click? I want it to change automatically after 5 seconds. Also from second content to third content and fourth content.
Here is a sample from JSFIDDLE. I figured that maybe the coding should be change somewhere here:
$('#text1').hover(function () {
hey();
});
Besides that, anyone knows why my fourth content isn't showing?
I am new in this. Please guide me. Many thanks in advance.
Use setTimeout() function
setTimeout(function () {
hey();
},5000);
Fiddle Updated Fiddle
EDIT
As per your need shoe after 35 seconds
$('#text1,#text2, #text3, #text4').hide();
setTimeout(function () {
$('#text1').show();
hey();
},35000);
function hey() {
setTimeout(function () {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
},5000);
}
Updated fiddle. NEW FIDDLE UPDATED AS PER COMMENT
Just add setTimeout(hey, 5000); instead hover handler:
$('#text2, #text3, #text4').hide();
setTimeout(hey, 5000);
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
}
Your hey() is showing upto 3rd text.Add another next() transition.
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow",function(){
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
});
});
}
If you want to change content automatically after 5 second you should use setTimeout function, for example:
setTimeout(function(){ alert("Hello"); }, 5000) this will triger alert box after 5 seconds...
I Think you have to use setInterval()
setInterval(function(){ hey(); }, 3000);
See this Link what is difference between setTimeout and
setInterval
I want after my page loads to do a trigger click once and only once.
many posts swear that settimeout only fires once, but in my case it is infinite!
here is one of my many trials.
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
});
I have tried moving that into a function outside the document.ready and then add cleartimeout, but then it stops from firing at all:
$( document ).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").first().trigger('click');
},1000);
clearTimeout(t);
}
What am I doing wrong!?
use clearTimeout() inside the setTimeout().It clears the timeout after triggering the click
$(document).ready(function() {
test();
});
function test() {
var t = setTimeout(function() {
$("#btn1").trigger('click');
clearTimeout(t);
}, 1000);
}
$("#btn1").on('click',function(){
console.log("Clicked");
});
Fiddle: http://jsfiddle.net/6G4pR/
use e.stopPropagation(), this might be because of event bubbling.
HTML
<button id="btn1">my button</button>
JS
$( document ).ready(function() {
setTimeout(function() {
$("#btn1").trigger('click');
},1000);
$("#btn1").click(function(e){
console.log('clicked');
e.stopPropagation();
console.log(e);
})
});
CODE
setInterval(function(){ $("#nav #nextslide").click()},10000);
It works. But I have a tag:
click.
I want, when mouseover on gallery button, pause timer. When mouseout, setInterval active again.
Tried this but not working:
$('a.gallery').hover(function(ev){
clearInterval(timer);
}, function(ev){
setInterval(function(){ $("#nav #nextslide").click()},10000);
});
How can I fix it?
You need to store the timer reference into a variable to clear it later
//declare it in a shared scope
var timer;
function startTimer() {
timer = setInterval(function () {
$("#nav #nextslide").click()
}, 10000);
}
$('a.gallery').hover(function (ev) {
clearInterval(timer);
}, function (ev) {
startTimer();
});
startTimer();
step 1:
function example(){ $("#nav #nextslide").click() //code you want ot execute inside setInterval() }
step 2:
var timer= setInterval(example(); ,10000);
step 3:
$('a.gallery').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer=setInterval(example(); ,10000);
});
I've tested it, working fine.
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/