0

以下站点工作正常，但是当我单击导航选项卡以淡入和淡出相关内容时，页脚也会淡入和淡出，我不希望这种情况发生。

链接到工作网站：http ://www.alessandrosantese.com/Pilates/Pilates/HTML/

$(document).ready(function() 
{

    var
        home = $('.home'),
        classes = $('.classes'),
        contacts = $('.contacts'),
        home_tab = $('.home_tab'),
        classes_tab = $('.classes_tab'),
        contacts_tab = $('.contacts_tab'),
        h_c = home.add(contacts),
        h_cl = home.add(classes),
        c_cl = contacts.add(classes),
        fast = 1200;


    home.css('display', 'block'); // display the home section on page load to start with

    classes.css('display', 'none');
    contacts.css('display', 'none');

    classes_tab.click(function(evt){
        evt.preventDefault();
        h_c.fadeOut(fast, function(){
        classes.fadeIn(fast);
        });
    });

    contacts_tab.click(function(evt){
        evt.preventDefault(evt);
        h_cl.fadeOut(fast, function(){
            contacts.fadeIn(fast);
        });
    });

    home_tab.click(function(evt){
        evt.preventDefault();
        c_cl.fadeOut(fast, function(){
            home.fadeIn(fast);
        });
    });



});

所有这些都发生在页眉和页脚之间，也许我的 jQuery 有问题

4

1 回答 1

2

页脚不会褪色。它被推到我们的视图下方，因为两个内容 div（一个淡出，一个淡入）在动画期间都是可见的。

您应该做的只是在旧内容完全消失后淡入新内容。

您的缺陷是使用 h_cl，它会快速触发回调，因为您隐藏了已经隐藏的元素。

试试这个：

h_cl.filter(':visible').fadeOut(...

this will make sure you are fading only the visible elements, which will only fire the callback once it really is gone.

于 2012-11-06T16:30:40.373 回答