Question

我正在创建一个在Google DFP广告管理系统中投放的页脚广告格式，但jQuery不会在其中运行（长篇故事）。所以我试图找到一些替代方法来完成相同的任务 - 即slideUp，slideDown和animate函数。有谁知道一些替代品？谢谢！

Answer 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 = '^^^';
   }
}

Answer 2

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)

但是，它的方法不接受回调 - 而是使用返回的promise提供回调：

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

还有一些其他改进。查看README了解详情。

Answer 3

两种选择：

Scriptaculous已经有了这样的事情，并没有在我遇到冲突的网页上崩溃。
Mootools的。

你可以拥有一些Scriptaculous demos。

Answer 4

为什么不使用Css动画？
我知道，它会直接跳到旧浏览器的末尾（＆lt; IE10），但仍然比没有更好，非常轻巧。

Answer 5

你到底想要实现什么目标？我可能能够帮助你完成你的slideUP和/或者，你可以使用jquery.animate（）来重新定位和更改高度等，但是slideUp和slideDown可以很好地工作！

Answer 6

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

jQuery的slideUp，slideDown，animate功能的任何替代品？

6 个答案: