動畫滾動很buggy

所以我一直試圖弄清楚這一點，似乎無法得到它。動畫滾動很buggy

我使用由圓圈組成的導航（請參閱下面的網站），當用戶點擊一個導航時，它會將他/她轉發到相應的幻燈片。

當您單擊時，它有時會一直滑回窗口的開始處（margin-left = 0）。如果它一開始沒有這樣做，只需點擊一下或兩個，你最終會看到它。

http://dan.stargroupdev.com/

下面是這車的代碼：

$("#footer-slidenav .links a").click(function() { 
    // Get nav index 
    var slidenum = $(this).attr("id").slice(3); 
    // Setup slide selector with string to avoid issues 
    var slidetext = ".slide:eq(" + slidenum + ")"; 
    slidenum = $(slidetext).offset().left; 
    console.log("Top: " + slidenum); 
    var offset2 = 0; 
    // Find window offset to center slide if screen is bigger than 1000px (size of one slide) 
    if (($(window).width() - 1000)/2 > 0) { 
    offset2 = ($(window).width() - 1000)/2; 
    } 
    // Slide window to slide # that was clicked 
    $("html:not(:animated), body:not(:animated)").animate({ 
    scrollLeft: slidenum 
    }, 1000, function() { 
    console.log("Middle: " + slidenum); 
    // Callback to center slide and give a nice little animated touch 
    slidenum = $(slidetext).offset().left; 
    console.log("Bottom: " + slidenum); 
    $("html:not(:animated), body:not(:animated)").animate({ 
     scrollLeft: (slidenum - offset2) 
    }, "fast"); 
    }); 
    return false; 
});

我嘗試之類的東西$("html:not(:animated), body:not(:animated)")與其他幾個類似的可能的解決方案，但錯誤依然存在。

任何建議將是偉大的，我很樂意接受任何想法，你們可能有。

謝謝。

來源

2011-07-15 switz

檢查你的變量slidenum是不是在改變它不應該改變（範圍）...做一些像console.log（「A - 」+ slidenum）;的console.log（「B - 」 + slidenum）;每次您將值設置爲slidenum變量後。 – Tank

我添加了上面的代碼，所以你可以看看控制檯。由於某種原因，這似乎是兩次調用回調。 – switz

雙重回調被稱爲是因爲你爲body和html設置了動畫（當你選擇** html，body **時，它選擇了兩個元素而不是一個）。兩個動畫立刻就是邪惡的。 – yoavmatchulsky

原來我在另一個JS文件中剩下一段代碼。對不起浪費你的時間，這就是爲什麼它變得混亂。

雖然我欣賞你的答案。

來源

2011-07-22 16:14:07 switz

伊利諾伊州提出了一個全新的解決方案（主要是新的）

$("#footer-slidenav .links a").click(function() { 
    var slidenum = $(this).attr("id").slice(3); 
    var slidetext = ".slide:eq(" + slidenum + ")"; 

    offset = $(slidetext).position().left; 
    console.log(offset); 

    $("body").animate({ 
     scrollLeft: offset 
    }); 
});

你能不能給它一個試試？

來源

2011-07-15 19:37:59 Lourens

我會在星期一嘗試它，但我真的不知道除了body，而不是'body，html'這個事實之外，它有什麼不同，除此之外我已經嘗試了一千次以上。 – switz

另一件事是我刪除了回調動畫 – Lourens

我試過了。現在它只是將它拍回到開始（回調會使它至少在開始之後起作用）。在控制檯中，數字仍然是正確的。 – switz

我的建議是測試網站沒有front的body。腳本http://dan.stargroupdev.com/sites/all/themes/starsite/js/starsite.js使用這個類的結果來創建我認爲不想要的行爲。如果我用螢火蟲將它移除，它對我來說可以。檢查並提供反饋，看看是否屬實。

來源

2011-07-19 21:12:52 Sotiris

首先我可以建議Arial Flesler的scrollTo插件？它太棒了，像魅力一樣工作。

您可以使用偏移量居中最終位置。

如果你想要某種緩動，那麼你可以使用它們使動畫看起來更自然自然。那麼彈性動畫呢？

我一直在使用這個插件超過一年，沒有發現任何問題。

另外，請記住.stop()滾動/動畫元素。

來源

2011-07-21 11:43:04

動畫滾動很buggy

回答

相關問題