jQuery的滑塊 - 動畫時間表

我使用jQuery滑塊功能的時間表jQuery的滑塊 - 動畫時間表

$("#content-slider").slider({ 
    min: 0, 
    max: 300, 
    step: 1, 
    change: handleSliderChange, 
    //start: getImageWidth, 
    slide: handleSliderSlide 
    }); 

    function handleSliderSlide(event, ui) { 

    $("#content-scroll").prop({scrollLeft: ui.value * (maxScroll/300) }); 

if (ui.value >= 7 && ui.value <= 13) { 
    $('#marker_10').animate({opacity: 'hide'}, 100, function() { $(this).parent('div').animate({marginTop: '100px'}, {duration:1000, queue:false }).addClass('up').find('p').animate({opacity: 'show'}) }) 
    } 

if (ui.value > 13 || ui.value < 7 && ($('div#container_10').hasClass('up'))) { 
    $('div.up').stop(true) 
    $('#container_10').removeClass('up').find('p').fadeOut('fast').end().animate({marginTop:'165px'}, {duration:500, complete:function() {$(this).find('img.marker').fadeIn() }, queue:false}) 
    } 
}

http://asla.dev.1over0.com/html/slider/bacardi_last.html

它動畫確定，當我滾動左到右，但是當我滾動從右到左，然後我得到一些問題的元素是淡出和正確顯示任何信息將不勝感激;這一切都是在前端完成謝謝

來源

2012-01-23 James Daly

你能舉一個具體的從左到右的問題的例子嗎？我一直在來回滾動，我不確定我在找什麼。另外，如果我解決了您的問題，是否可以免費獲得一些酒？：P – j08691

感謝您的反饋，動畫更加「跳躍」，並且時間軸標記或文本並不總是基於值正確淡出或淡入 - 動畫幾乎像波一樣;如果我將所有段落永久化爲http://asla.dev.1over0.com/html/slider/bacardi_five.html動畫應該是波浪形的，那麼上下動畫就能正常工作。如果我爲百加得工作，我會給你所有的免費酒，幫助我;但我通過與廣告公司合作的開發人員獲得了此項目，但無法完成，因此將其傳遞給我的小組 –

我的意思是'隱藏'沒有所有段落元素 –

我沒有直接的解決方案，但一些注意事項可能有所幫助。

直到滑塊經過活動內容的左邊緣，纔會觸發向下動畫。在右邊，它在滑塊離開垂直線後立即觸發。
幾個部分的內容被截斷 - 看起來像一個簡單的高度問題？
從右向左滑動時，垂直線不會消失。
您可能希望爲「＃content-slider a」添加一個「標題」，因爲新用戶可能無法確定它最初的功能。一個簡單的「滑動我」就足夠了:)
另外一個注意，當瀏覽器窗口很小（大約800px左右，沒有檢查完全）時，內容會跳到滑動條下方。

想想我該如何處理這個任務;我將動畫設置爲動畫功能，然後是動畫。在我可以驗證它們按鈕按下（或某些非滑塊觸發器）後，我會努力確保「活動」區域在時間線上設置正確（垂直線或整個「活動」內容框，親自我會在中間做點什麼）。設置完這些部分後，當滑塊處於「活動」區域時觸發向上移動功能應該是一件容易的任務，並且在滑塊離開時向下移動，確保它們不會同時運行。

希望它有幫助！

來源

2012-03-15 17:41:44 DACrosby

jQuery的滑塊 - 動畫時間表

回答

相關問題