CODEWITHSUNDEEP
jqueryif-statementslidedownslideup
Maxim Siebert
Maxim Siebert

Reputation: 307

if(:visible) slide up with a delay

I'm trying to have a page slide down and then another page slide up. But, for some reason, I can't figure it out.

http://maximsiebert.com/unamed/Untitled-1.html

If you look on here, you can see that if I click the About navigation link, the page slides up, if I click again it slides back down. Same for the Contact page.

The problem is, while, I have the About page up and I click on the contact link, I need the About page to slide down, while the Contact page slides up, vice versa. But I can't seem to get it to work.

Here's my code: ps: in "divPages" I have #aboutpage and #contactpage 

 $(document).ready(function() {
 $('.about').click(function() {
    if (!$('#aboutpage').is(":visible")) {
    $('#portfolio').slideUp(1000);
        $('#aboutpage').slideDown(1000);
    }else{
        $('#portfolio').slideDown(1000);
        $('#aboutpage').slideUp(1000);
    }

});

});

$(document).ready(function() {
$('.contact').click(function() {
    if (!$('#contactpage').is(":visible")) {
        $('#portfolio').slideUp(1000);
        $('#contactpage').slideDown(1000);
    }else{
        $('#portfolio').slideDown(1000);
        $('#contactpage').slideUp(1000);
    }

});

});

$(document).ready(function() {
$('.welcome').click(function() {
    if ($(divPages).is(":visible")) {
        $('#portfolio').slideDown(1000);
        $(divPages).slideUp(1000);
        }else{
        $('html, body').animate({scrollTop:0}, 'slow');
    }

});

});

Upvotes: 0

Views: 2279

Answers (2)

Louis Loudog Trottier
Louis Loudog Trottier

Reputation: 487

Your about page is still there but hidden somewhere behind. I son't think this is the full extnd of your problem but it can be a big part of it.

after any slideDown() add .css({'z-index':'-1'}); as in and after ans slideUp() add .css({'z-index':'100'});

$('#about').slideDown(1000).css({'z-index':'-1'});
$('#contact').slideDown(1000).css({'z-index':'100'});

i've exprienced the same problem with EI on a cross-fading slide show. The other pic was staying over the other one so you tough it didn'T work.

Hope this helps.

EDIT: affter taking another look, the about stayed hidden according to my firebug. You sould then also check if it's visible or not and change the display if needed.

This can be achieve with the .is(':visible') like so:

if($('#about').is(':visible') == false) $('#about').show();

reuse and change the html pointer for your other elements as needed.

Upvotes: 1

kmfk
kmfk

Reputation: 3951

I would instead have a single class shared across all menu items that have your click event bound to. Then, add a class to keep track of which item is currently shown.

last edit Add the class .menu-item and data attribute data-content-div equal to the content div's id to your menu li's.

<li class="about menu-item" data-content-div="contactpage">about</li>

And try this code in replace of what you have:

$(document).ready(function() {
    $('.menu-item').click(function() {
        if ( $(this).hasClass('menu-active') )
        {
            var contentDiv = $(this).data('content-div');
            $('.menu-active').removeClass('menu-active');
            $('#' + contentDiv).slideDown(1000);
        }
        else if ( $('.menu-active').length )
        {      
            var menuItem = $(this);
            var hideDiv = $('.menu-active').data('content-div');
            $('.menu-active').removeClass('menu-active');
            $('#' + hideDiv).slideDown(500, function() { 
                menuItem.addClass('menu-active');
                $('#' + menuItem.data('content-div') ).slideUp(1000);
            });
        }
        else
        {
            $(this).addClass('menu-active');
            $('#' + $(this).data('content-div') ).slideUp(1000);
        }

    });
});

​

Here is a fiddle where it would work, if I had all your styles. ​

Upvotes: 0

Related Questions