0

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');
    }

});

});

4

2 回答 2

1

您的关于页面仍然存在，但隐藏在后面的某个地方。我儿子认为这不是您问题的全部内容，但它可能是其中很大一部分。

在任何 slideDown() 添加 .css({'z-index':'-1'}); 在和之后 ans slideUp() 添加 .css({'z-index':'100'});

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

我在交叉淡入淡出的幻灯片放映中遇到了与 EI 相同的问题。另一张照片停留在另一张照片上，所以你很难，它没有用。

希望这可以帮助。

编辑：再看一遍后，根据我的萤火虫，关于保持隐藏。然后，您还应该检查它是否可见，并在需要时更改显示。

这可以通过 .is(':visible') 来实现，如下所示：

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

根据需要重用和更改其他元素的 html 指针。

于 2012-10-20T03:50:29.137 回答
0

相反，我将在绑定了单击事件的所有菜单项之间共享一个类。然后，添加一个类来跟踪当前显示的项目。

最后编辑将等于内容 div 的 id的类.menu-item和数据属性添加到您的菜单 li 中。data-content-div

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

并尝试使用此代码代替您拥有的代码：

$(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);
        }

    });
});

​</p>

如果我有你所有的风格，这是一个可行的小提琴。​</p>

于 2012-10-20T01:55:29.420 回答