CODEWITHSUNDEEP
jqueryfadeinfadeout
Elixa Case
Elixa Case

Reputation: 1

jQuery is Conflicting

I'm pretty sure my jQuery is conflicting, but I can't seem to quite figure out the problem.

When the user clicks on the nav, the four main options Elixa, About, Services and Contact will fadeOut/hide/opacity:0 (whatever needs to be done), and several div classes will pop up as responded.

The problem lies in the returning. When the user clicks the .triangle (essentially the back button), the correct div classes fadeOut, but I can't get the Elixa, About, Services and Contact divs to fadeIn.

Am I just missing some code or is it just a conflicting problem?

$(document).ready(function() {
    $(".title1").click(function(){
        $(".elixa, .about, .services, .contact").fadeOut(3000)

        .queue(function() {
            $(".infobox, .photobox, .photopanel, .titlepanel, .titletitle, .triangle").delay(3000);
            $(".infobox, .photobox, .photopanel, .titlepanel, .titletitle, .triangle").css({opacity:1});                
            $(".infobox, .photobox, .photopanel, .titlepanel, .titletitle, .triangle").fadeIn(3000);
    });

    $(".triangle").click(function() {
        $(".infobox, .photobox, .photopanel, .titlepanel, .titletitle, .triangle").css({opacity:0})

        .queue(function() {
            $(".elixa, .about, .services, .contact").fadeIn(3000);
        });
    });
});

Upvotes: 0

Views: 53

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

I think it is because of the use of queue, when you use the queue method somebody has to dequeue the method for it to get executed which will happen if you use a method like fadeOut or animate before or after it.

In your second example you are using css which is not a queue based method that could be the reason so just call them sequentially or call .dequeue() after calling .queue()

$(".triangle").click(function() {
    $(".infobox, .photobox, .photopanel, .titlepanel, .titletitle, .triangle").css({opacity:0});
    $(".elixa, .about, .services, .contact").fadeIn(3000);
});

Upvotes: 2

Related Questions