Jquery Slider效果

Question

我使用jQuery来实现按钮点击的滑块效果。我的代码是：

$(document).ready(function() {

  $("#mybutton").click(function () { 
      $("#slidemarginleft").hide("slide", { direction: "down" }, 1000);
});
});

当我单击该按钮时，出现JavaScript错误：

f.easing[e.animatedProperties[this.prop]] is not a function

Answer 1

他提供的代码片段直接来自jQuery UI documentation

$("div").click(function () {
  $(this).hide("slide", { direction: "down" }, 1000);
});

我刚收到这个错误，问题是jQuery UI脚本没有加载(天哪！)。缓动动画需要jQuery UI。

尝试添加此命令，看看它是否解决了问题：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>       

Answer 2

试用此版本的jquery.easing

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

它解决了我的问题。

Answer 3

我认为问题在于传递给hide方法的第二个参数。从关于Hide()的jQuery文档中，它说：

确定动画将运行多长时间的字符串或数字。

easing指示哪个缓动函数用于转换的字符串。

callback动画完成后要调用的函数

第二个参数是一个javascript对象，而不是一个字符串。它正在尝试找到一个称为{ direction："down“}的宽松函数，但没有任何运气。jQuery库中唯一轻松的实现是缺省实现，称为swing，以及一个以恒定速度进行的实现，称为线性。第三个参数看起来像是一个持续时间，应该是第一个参数。

我还想知道为什么要使用jQuery ()方法而不是slideToggle()方法来制作隐藏幻灯片，或者根据需要只使用slideDown()或slideUp()。