jQuery幻灯片效果

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

- Durga Dutt

---

如果您没有说明使用的滑块和出现问题的浏览器，那么谁都无法回答您的问题。您是否尝试在不同的浏览器中测试，以确定是否是特定于浏览器的问题？ - JK.

Answer 1

他提供的代码片段直接来自于jQuery UI文档:

$("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>       

- Justin Searls

---

是的，只需包含jquery-ui即可解决问题。非常感谢。 - Duc Tran

适用于任何版本。我使用的是1.7.1。谢谢！ - KVDD

Answer 2

尝试使用这个版本的jquery.easing：http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js，它解决了我的问题。

- Vicky Raj Sharma

Answer 3

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

duration：一个字符串或数字，用于确定动画运行的时间。
easing：一个字符串，指示要用于过渡的缓动函数。
callback：一种在动画完成后调用的函数。

您的第二个参数是一个JavaScript对象，而不是一个字符串。它试图找到一个名为{ direction: "down" }的缓动函数，但没有成功。jQuery库中唯一的缓动实现是默认的swing和以恒定速度进行的linear。您还将一个看起来像持续时间的参数作为第三个参数，但它应该是第一个参数。

我还想知道为什么您要使用hide()方法来执行jQuery滑动，而不是slideToggle()方法或者根据您的需要使用slideDown()或slideUp()。

- Pete

Answer 4

我曾经遇到过类似的问题。jquery-easing-1.3.pack.js 单独使用无法正常工作，但是与 jquery-easing-compatibility.1.2.pack.js 结合使用就可以解决问题 =)

下载链接： http://sliding1.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js

- Marion LP

Answer 5

请用下面的链接替换您的代码，问题就会得到解决

http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js

- Sachin Shukla

---

亲爱的，我的意思是你只需要用那个链接中的代码替换你的缓动代码...那样就可以完美地运行了。 - Sachin Shukla

Answer 6

这个错误也可能是由于无效的效果值引起的。例如：$(this).hide("slid", {}, 1000);有效的效果值包括：'blind'、'clip'、'drop'、'explode'、'fold'、'puff'、'slide'、'scale'、'size'、'pulsate'。

在这里查看。

- Alex Barker

Answer 7

假设您想要实现使用“向下滑动”的动画隐藏元素的效果，可以尝试以下代码...

演示：http://jsfiddle.net/wdm954/Frumm/3/

$('#button').click(function() {
    var h = $('#slide').height();
    $('#slide').animate({ height: 0, marginTop: h+"px" }, 1000, function() {
         $(this).hide();   
    });
});

- wdm

Answer 8

另一个原因可能是如果有一个包含自己的缓动插件的jquery插件，以实现紧凑性，有效地替换了最新的缓动函数。

可以在所有js文件中搜索此内容以查找这样的“罪犯”：

Query.extend({easing:{

- Johan