使用純javascript的動畫，沒有jquery

我正在使用jquery/jquery-ui的slideDown()動畫功能的特定任務。現在發現我不能在這個項目中使用jQuery。我也不能使用YUI或任何其他庫。所以我想知道有沒有辦法使用純JavaScript來執行slideDown風格的動畫？使用純javascript的動畫，沒有jquery

編輯：我有，因爲我使用的硒控制下的網頁做纔不至於jQuery和這個特定的網站加入了jQuery出於某些原因，分頁符事件處理程序。

來源

2011-12-29 Jim_CS

爲什麼不看看jQuery的實現？它只是在那裏的JavaScript。 – canon 2011-12-29 18:29:12

如果你不想要jQuery，你爲什麼要在你的問題中加入'[jQuery]'標籤？我已將其刪除。 – 2011-12-29 18:30:35

@RobW問題的功能來自jQuery ... – canon 2011-12-29 18:31:48

顯而易見的答案是......快速的問題......難道你不能只是做一個ASYNC加載jQuery到文檔中，然後在事後使用它，或者你可以不使用它，因爲其他限制？

最糟糕的情況下，你可以撕掉你需要的部分，但這沒有多大意義。如果您可以編輯任何JS，您可以輕鬆地將jQuery粘貼到代碼上方。

來源

2011-12-29 18:29:56 Seth

將jquery添加到分頁符現有的事件處理程序。 – 2011-12-29 21:06:29

你熟悉jQuery的'noConflict（）'調用嗎？我不確定你使用的其他庫是什麼，但這是防止這種情況發生的好方法。 – Seth 2011-12-30 01:43:10

您可以使用CSS3製作幻燈片和動畫，例如

.slidable { 
    position: relative; 
    -webkit-animation: Slider 2s ease-in-out; 
} 
@-webkit-keyframes Slider { 
    from { 
    top: 0px; 
    } 
    to { 
    top: 100px; 
    } 
}

對Firefox使用-moz-。 Javascript也可以進行移動，只需將它們放入計時器中即可

var top = 0; 
window.Timeout(MoveSomething, 10); 
function MoveSomething { 
    var el = document.getElementById('moveme'); 
    top += 2;  
    el.style.top = top + 'px'; 
    if (top < 100) window.Timeout(MoveSomething, 10); 
}

只需要編碼！

來源

2011-12-29 18:37:53

使用純javascript的動畫，沒有jquery

回答

相關問題