Reputation: 375
I have two div boxes promo1
and promo2
. promo1
is displayed whereas promo2
is hidden. Every x seconds I would like to switch the boxes so it hides promo1
and fades in promo2
and vice versa.
Parden my scripting skills, I'm still learning lol. This is what I got so far..
function switch1(){
$("#promo1").hide("fast");
$("#promo2").fadeIn("slow");
}
function switch2(){
$("#promo2").hide("fast");
$("#promo1").fadeIn("slow");
}
$(document).ready(function() {
setInterval( "switch1()", 5000 );
setInterval( "switch2()", 10000 );
});
Now the problem with this as you can see is the switch2
overlaps with switch1
. Is there a simpler way to do what I'm trying to achieve here?
Upvotes: 1
Views: 4672
Reputation: 854
I expanded what was already shown and added a indicator feature that can be used and placed anywhere. http://jsfiddle.net/BadBoyBill/8yHmy/
$(document).ready(function(){
$("div[id^=marquee]:gt(0)").hide();
function startTimer(){
i = setInterval(rotate, 2000);
return i;
}
var intID = startTimer();
function stopTimer(){
clearInterval(intID);
}
function rotate(){
reference = $("div[id^=marquee]:visible").hide().next("div[id^=marquee]");
reference.length ? $(reference).fadeIn() : $("div[id^=marquee]:first").fadeIn() ;
dot = $(".indicator-on[id^=indicator]").removeClass("indicator-on").next("a[id^=indicator]").addClass("indicator-on");
dot.length ? $(dot).addClass("indicator-on") : $("a[id^=indicator]:first").addClass("indicator-on");
}
$("div[id^=marquee]").each(function(){
$("#indicators").append("<a href='#' id='indicator' class='indicator'></a>");
$(".indicator:first").addClass("indicator-on");
});
$("a[id^=indicator]").click(function(e){
var index = $("a[id^=indicator]").index(this);
//alert(index);
$("div[id=marquee]").hide();
$("div[id=marquee]").eq(index).show();
$("a[id=indicator]").removeClass("indicator-on");
$("a[id=indicator]").eq(index).addClass("indicator-on");
stopTimer();
intID = startTimer();
e.preventDefault();
});
$("a[id=indicator], div[id=marquee]").mouseenter(function(){
stopTimer();
//alert("mouseenter");
}).mouseleave(function(){
stopTimer();
intID = startTimer();
//alert("mouseexit");
});
});
Upvotes: 0
Reputation: 268512
Don't Re-Invent the Wheel
Unless you're trying to teach yourself jQuery, the best solution would be to go with something more sure, like the Cycle plugin for jQuery: http://jquery.malsup.com/cycle/
Unless you really want to...
If you'd like to roll a custom solution, the following may help. Note also that the following will work with any number of promo divs, unlike some of the other answers provided. Granted, you only mentioned two but you shouldn't paint yourself into a corner:
/* Hide all but first promo div */
$("div[id^=promo]:gt(0)").hide();
/* Setup Interval */
setInterval(function(){
/* Hide visible div, get reference to next promo div */
reference = $("div:visible").hide().next("div[id^=promo]");
/* If there is not a next promo div, show the first promo div */
reference.length ? $(reference).fadeIn() : $("div:first").fadeIn() ;
/* Do this every five seconds */
}, 5000);
Demo online: http://jsbin.com/ewusu5/edit
Be sure to either perform this logic at the end of your document, or within a ready-safe method like the following:
$(function(){
/* code to be ran when document is ready */
});
Upvotes: 1
Reputation: 7714
You can use a variable to switch between states:
var current_promo = 1;
function switch_promo(){
if (current_promo == 1) {
$("#promo1").hide();
$("#promo2").fadeIn("slow");
current_promo = 2;
} else {
$("#promo2").hide();
$("#promo1").fadeIn("slow");
current_promo = 1;
}
}
setInterval(switch_promo, 1000);
I removed the "fast" parameter on hide
because otherwise the 2 elements are displayed at the same time and unless they're positioned precisely (or you chain the effects), it's ugly.
Upvotes: 1
Reputation: 30012
Just use .toggle();
function switch1(){
$("#promo1").toggle('slow');
$("#promo2").toggle('slow');
}
$(document).ready(function() {
$("#promo2").hide();
setInterval(switch1, 5000 );
});
http://jsfiddle.net/niklasvh/X6G9Y/
Upvotes: 1