2

我正在创建一个页脚广告格式以在 Google DFP 中运行，但 jQuery 无法在其中运行（长话短说）。因此，我试图找到一些替代方法来完成相同的任务——即 slideUp、slideDown 和 animate 函数。有谁知道一些替代品？谢谢！

4

6 回答 6

3

dom-slider是 jQuery 的 slideDown、slideUp 和 slideToggle 方法的 vanilla-js 实现，适用于高度未知的元素。像 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!');
})

There are a few other improvements as well. Check out the README for the details.

于 2017-03-08T19:05:11.480 回答
1

检查适用于 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-13T14:33:48.343 回答
0

两种选择：

  1. Scriptaculous 已经有这样的事情要做，并且没有在我有冲突的页面上崩溃。

  2. 穆工具。

你可以在一些Scriptaculous 演示。

于 2012-08-13T14:27:19.920 回答
0

为什么不使用 Css 动画？
我知道，它会在旧浏览器（< IE10）中直接跳到最后，
但总比没有好，而且非常轻量级。

于 2012-08-13T14:29:59.563 回答
0

你到底想达到什么目的？我也许可以帮助您解决 slideUP 和 downs/ 或者，您可以使用 jquery.animate() 重新定位和更改高度等，但 slideUp 和 slideDown 确实工作得很好！

于 2012-08-13T14:34:13.437 回答
-3

只需将整个 jQuery 源文件粘贴到您可以编辑的脚本中。之后我可能会添加 100 或 200 个换行符，以从我的代码中添加一些视觉分离。

于 2014-04-09T05:54:30.960 回答