I am struggling with my first jQuery script. I've got a DIV on my page that is set to hide via CSS. Then, I have this script that runs to make it fade in, fade out, then fade in again:
<script type="text/javascript">
(function($) {
$(function() {
$('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
});
})(jQuery);
</script>
This part works fine. Now, my question:
How do I change it so that this script runs loops (forever) instead of just once?
Thanks in advance! -Nate
Put your code inside a setInterval
:
$(function () {
setInterval(function () {
$('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
}, 5000);
});
Since you will be running this as long as the page is active then you should do everything you can to optimize your code, for instance you can cache the selection outside of the interval:
$(function () {
var $element = $('#abovelogo');
setInterval(function () {
$element.fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
}, 5000);
});
Docs for setInterval
: https://developer.mozilla.org/en/window.setInterval
Also, instead of using .delay()
you can use the callback functions in each animation to call one animation after another:
$(function () {
var $element = $('#abovelogo');
setInterval(function () {
$element.fadeIn(1000, function () {
$element.fadeOut(1500, function () {
$element.fadeIn(1500)
});
});
}, 5000);
});
Here is a demo: http://jsfiddle.net/xsATz/
You can also use setTimeout
and call a function recursively:
$(function () {
var $element = $('#abovelogo');
function fadeInOut () {
$element.fadeIn(1000, function () {
$element.fadeOut(1500, function () {
$element.fadeIn(1500, function () {
setTimeout(fadeInOut, 500);
});
});
});
}
fadeInOut();
});
Here is a demo: http://jsfiddle.net/xsATz/1/
<script type="text/javascript">
function doFade() {
$('.foo').toggleClass('fooAct');
setTimeout(doFade, 1000);
}
$(document).ready(function(){
doFade();
});
</script>
<style>
div {
height:200px;
background:black;
}
.foo {
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
opacity:0.1;
}
.fooAct {
opacity:1;
}
</style>
<div class="foo"></div>
just for imagination. You can do it with css3. I hope that can help you too. Doing this kind of things, css should be more confortable for browser performance instead of jQuery.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With