jQuery的slideUp，slideDown，動畫函數的任何替代品？

我正在創建在Google DFP中運行的頁腳廣告格式，但jQuery無法在其中工作（長篇故事）。所以我試圖找到一些替代方法來完成相同的任務 - 即slideUp，slideDown和animate函數。有誰知道一些替代品？謝謝！jQuery的slideUp，slideDown，動畫函數的任何替代品？

來源

2012-08-13 Kyle

如果jQuery不能在其中工作，是否有其他庫阻止它？如果是這樣，哪一個？ – 2012-08-13 14:27:04

通過回顧jQuery庫，您可以爲上述功能準備自己的代碼。 – Shreedhar 2012-08-13 14:27:07

Javascript ....？ – Alex 2012-08-13 14:27:09

檢查這個環節，與JavaScript的工作：

http://www.switchonthecode.com/tutorials/javascript-sliding-panels-using-generic-animation

例子：

HTML：

<div style="position:relative; 
      width:150px; 
      height:170px; 
      top:0px; 
      left:0px;"> 
    <div id="exampleHeader1" 
     style="position:absolute; 
      width:150px; 
      height:20px; 
      top:0px; 
      left:0px; 
      background:#3b587a; 
      text-align:center; 
      color:#FFFFFF;" 
     onclick="slideExample1('examplePanel1', this);"> 
    ^^^ 
    </div> 
    <div id="examplePanel1" 
     style="position:absolute; 
      width:150px; 
      height:130px; 
      top:20px; 
      left:0px; 
      background:#a6bbcd; 
      overflow:hidden;"> 
    Content 
    </div> 
</div>

的Javascript：

function slideExample1(elementId, headerElement) 
{ 
    var element = document.getElementById(elementId); 
    if(element.up == null || element.down) 
    { 
     animate(elementId, 0, 20, 150, 0, 250, null); 
     element.up = true; 
     element.down = false; 
     headerElement.innerHTML = 'vvv'; 
    } 
    else 
    { 
     animate(elementId, 0, 20, 150, 130, 250, null); 
     element.down = true; 
     element.up = false; 
     headerElement.innerHTML = '^^^'; 
    } 
}

來源

2012-08-13 14:33:48 MCSI

這就是我要找的，謝謝！我會更仔細地研究它，然後放手一搏。保重， – Kyle 2012-08-13 17:00:42

已經過了一個月了，但我終於實現了這一點，它效果很好！非常感謝你的幫助！ – Kyle 2012-09-27 04:25:51

兩種選擇：

Scriptaculous的有這樣的事情已經走，並沒有墜毀在那裏我有過沖突的網頁。
Mootools。

您可以在一些Scriptaculous demos。

來源

2012-08-13 14:27:19 rahul

我害怕使用這樣的另一個庫會導致同樣的問題。謝謝你！ – Kyle 2012-08-13 17:00:05

爲什麼不使用Css動畫？
我知道，它會直接跳到年底的瀏覽器（< IE10），
，但仍然比沒有好，非常輕量級。

來源

2012-08-13 14:29:59

我不知道 - 也許這會起作用，但如果像你提到的舊瀏覽器有一些問題，那麼可能不會... – Kyle 2012-08-13 17:02:18

這是優雅的退化。我的意思是，它可以在任何地方工作，但在傳統瀏覽器中，動畫會直接跳到最後。這不會影響導航，但只會影響導航中動畫的「加值」。從那裏，這是你的電話來確定動畫的重要性:)希望得到這個幫助 – 2012-08-13 17:13:34

好吧，我明白了。你有沒有例子說明如何做到這一點？謝謝 – Kyle 2012-08-13 17:27:44

你究竟在做什麼？我可以用你的幻燈片UP和/或幫助你。或者，你可以使用jquery.animate（）來重新定位和改變高度等，但是slideUp和slideDown確實工作得很好！

來源

2012-08-13 14:34:13 Shannon

Hi Shannon，是的，slideUp/Down工作很好 - 但是，jQuery不會在IE中通過Google DFP廣告服務器作爲src。它在其他瀏覽器中效果很好，代碼本身在IE中以硬編碼方式查找頁面，但通過Google DFP在IE瀏覽器中加載jQuery不起作用... :(因此，我正在尋找其他單獨的功能使用。 – Kyle 2012-08-13 17:05:12

只需將整個jQuery源文件粘貼到您可以編輯的腳本中即可。之後我會添加大約100或200條換行符，以便從代碼中添加一些可視化分隔。

來源

2014-04-09 05:54:30 nmz787

dom-slider是香草JS實現的jQuery的了slideDown，效果基本show和方法的slideToggle上與無名高地元素的作品。使用它，就像jQuery的：

element.slideUp() 
element.slideDown(800) 
element.slideToggle(800, 'easeOut') // CSS transition timing function 
element.slideUp(300).slideDown(500)

然而，其方法不接受回調 - 相反，你提供的回調函數返回的承諾：

element.slideUp().then(function() { 
    console.log('sliding done!'); 
})

還有一些其他方面的改進，以及。詳情請查看README。

來源

2017-03-08 19:05:11 Brenton

jQuery的slideUp，slideDown，動畫函數的任何替代品？

回答

相關問題