Question

以下网站运行正常，但是当我点击导航标签淡入和淡出相关内容时，页脚也会淡入淡出，我不希望这种情况发生。

指向工作网站的链接：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中出现了问题

Answer 1

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

一旦旧内容完全消失，你应该做的只是淡化新内容。

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

试试这个：

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

这将确保您只消除可见元素，只有在它真正消失后才会触发回调。

问题与回调函数

1 个答案: