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(...

これにより、表示されている要素のみがフェードされていることが確認され、実際に消えたときにのみコールバックが起動されます。

于 2012-11-06T16:30:40.373 に答える