setInterval change background div - javascript

i have code
function smena(){
$('.wrapper').animate({opacity:0},2500,function(){
setTimeout ($('.wrapper').animate({opacity:1},2500),5000)
});
}
$(document).ready(function(){
setInterval('smena();',10000);
});
why me animaation jump? i want just change bg for my div "wrapper".

Basically you're not passing the functions around correctly for setTimeout. You're actually passing the result of "$('.wrapper').animate({opacity:1},2500)" to the setTimeout, not the action itself. This is probably what you want:
function smena(){
$('.wrapper').animate({opacity:0},2500,function(){
setTimeout (function() {
$('.wrapper').animate({opacity:1},2500)
},5000)
});
}
$(document).ready(function() {
setInterval(smena, 10000);
});

Related

JS setTimeout stack

why does setTimeout not work? And how to do this action properly? I need to get 30s delay every submit. Sorry for newbie question, but i am newbie.
if (event.target.id.indexOf('submit') === 0)
{ post1000.submit(); setTimeout('post1001.submit();', 30000); }
{ post1001.submit(); setTimeout('post1002.submit();', 60000); }
...
{ post5092.submit(); setTimeout('post5093.submit();', 122790000); }
}, false);
You can also try something like this;
setTimeout(yourSubmitFunction, 3000)
function yourSubmitFunction() {
//do whatever you want to do you can define submit here
}
You can call setTimeout in a loop, like for each element in your array which has your "post****" variables.
I believe you shouln't use a string as first parameter for setTimeout();
Here is this function definition :
setTimeout(function,milliseconds,param1,param2,...)
Try with this code sample, or update yours accordingly :
setTimeout(function(){ alert("Hello"); }, 3000);

Pause simple fader script on mouse-hover

I would like pause on hover when the mouse hovers over the fadelinks div for this script:
$(function(){
$('.fadelinks > :gt(0)').hide();
setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo
('.fadelinks');}, 5000);
});
The html is along the lines of:
<div class="fadelinks">
<div>...</div>
<div>...</div>
</div>
I've tried a few things relating to interval to try and cram pause on hover functionality in there, but with my extremely limited jquery knowledge, everything I've tried breaks the script, leaving it stuck on the last slide or the first slide. Would just like this simple script to pause on mouse-hover and start up again on mouse-exit.
Here's a JSFiddle of the script in its natural state.
Try using .hover() , declaring variable to reference setInterval , using a function to call setInterval
$(function(){
// define `_interval` variable
var _interval;
// cache `.fadelinks` element
var elem = $(".fadelinks");
elem.find("> :gt(0)").hide();
elem.hover(function() {
// "pause" at `hover` of `.fadelinks`
clearInterval(_interval)
}, function() {
// "reset"
interval()
});
var interval = function() {
_interval = setInterval(function(){
elem.find("> :first-child")
.fadeOut().next().fadeIn().end()
.appendTo(elem);
}, 2000)
};
interval()
});
jsfiddle https://jsfiddle.net/ccmgdfog/4/
In your case, there wasn't the need for jQuery. Only with stopInterval you can control it. Altrough there is the jQuery $.stop() function, we wouldn't get the desired result.
I've changed a bit your code:
$(function(){
$('.fadelinks > :gt(0)').hide();
var interval = setInterval(intervalFunc, 2000);
$('.fadelinks').on('mouseenter',function(){
clearInterval(interval);
});
$('.fadelinks').on('mouseout',function(){
interval = setInterval(intervalFunc, 2000);
});
function intervalFunc(){
$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');
}
});

Function not repeating in Javascript?

I have a function in Javascript that I need to repeat every 5 seconds.
Here is the simple code:
function myFunk() {
$('body').addClass('polyonloaded');
setTimeout(myFunk, 5000);
}
myFunk();
It runs the function once, and does not repeat it anymore. What went wrong with my code?
Your code is working; try printing something:
function myFunk() {
$('body').addClass('polyonloaded');
console.log('hello');
setTimeout(myFunk, 5000);
}
myFunk();
The problem: since the added class is always the same, nothing happens:
the class is already added; it won't be added again.
If you want to add, remove, add, remove, ... etc. use toggleClass:
function myFunk() {
$('body').toggleClass('polyonloaded');
setTimeout(myFunk, $('body').hasClass('polyonloaded') ? 4000 : 5000);
}
myFunk();
You have to add and remove the class.
Set an interval that adds the class, then set a timeout inside to wait a bit that removes it, just before the next interval.
Forked yours here:
http://codepen.io/snlacks/pen/KwoELp
$(document).ready(function() {
setInterval( function() {
$('body').addClass('polyonloaded');
setTimeout( function(){
$('body').removeClass('polyonloaded');
}, 4000)}, 5000 );
});
Seems to be working fine:
function myFunk() {
console.log('running');
setTimeout(myFunk, 1000);
}
myFunk();
http://jsfiddle.net/dem6u89L/

Jquery ajax post with timer event?

script
$(document).ready(function () {
var meter_id = $("#MeterReadingTypes li a.link_active").attr("id");
var range_id = $("#DateRangeTypes li a.link_active").attr("id");
window.setInterval(PostMainChartValues(meter_id, range_id), 5000);
...
});
function PostMainChartValues(meter_id, range_type_id) {
$.ajax({
...
});
}
window.setInterval is not trigerred. If I write an alert in setInterval it works. What is the reason of this? Why function is not triggering? I tracked it with chrome DevTools, and there is no move.
The first parameter to setInterval should be a function (or an evalable string). Right now, you are calling PostMainChartValues() and passing its return value to setInterval().
Change it to:
window.setInterval(function() {
PostMainChartValues(meter_id, range_id);
}, 5000);
This is not an ajax issue. You are using in wrong mode the setInterval parameter.
Create an anonymous function like bellow:
window.setInterval(function () { PostMainChartValues(meter_id, range_id); }, 5000);

setInterval is not working in YUI

I am trying to use SetInterval and clearInterval in YUI
The code is written so it will create element every second and on mouse hover of div it should stop creating element.
http://jsbin.com/awadek/5
Please let me know what is wrong with my code?
You should pass an anonymous function as a handler to "mouseover". Otherwise, Javascript will attempt to evaluate and call the return from clearInterval (in this case, an integer!). The following code will work:
YUI().use("console", "console-filters", "substitute", "node-event-simulate",
function(Y) {
console.log("YUI is ready");
var doSomething = function(e) {
Y.one("#seconds").append("<p>I am number four</p>");
};
IntervalId = setInterval(doSomething, 1000);
//Notice the anonymous function below:
Y.one("#clearInt").on('mouseover', function() { clearInterval( IntervalId ) });
});
Here is your JSBin, ftfy. Enjoy!

Categories

Resources