if(:visible) 延迟向上滑动

Question

我试图让一个页面向下滑动，然后另一个页面向上滑动。但是，由于某种原因，我无法弄清楚。

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

如果你看这里，你会看到如果我点击About导航链接，页面会向上滑动，如果我再次点击，它会向下滑动。 Contact page 也一样。

问题是，虽然我将About page 向上滑动并单击联系人链接，但我需要About page 向下滑动，而Contact page 向上滑动，反之亦然。但我似乎无法让它工作。

这是我的代码： ps：在“divPages”中我有#aboutpage 和#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');
    }

});

});

Answer 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 相同的问题。另一张照片停留在另一张照片上，所以你很难它没有工作。

希望这会有所帮助。

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

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

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

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

Answer 2

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

上次编辑 将类.menu-item 和数据属性data-content-div 与内容div 的id 相同添加到您的菜单li 中。

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

    });
});

​

这是一个fiddle，如果我有你所有的风格，它就会起作用。 ​