CODEWITHSUNDEEP
jqueryhtmlswitch-statement
Ian
Ian

Reputation: 375

Switching between div's with jQuery

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

Answers (4)

William Worley
William Worley

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

Sampson
Sampson

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

Micha&#235;l Witrant
Micha&#235;l Witrant

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

Niklas
Niklas

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

Related Questions