[英]jQuery Easing with slideUp Easing Function
I just read this question and answer from StackExchange , but the solution does not work for me. 我刚从StackExchange上读到了这个问题和答案 ,但解决方案对我不起作用。
This does not work: 这不起作用:
$("#top_slide").slideUp(5000, "easeInOutQuart");
But this does work: 但这确实有效:
$("#top_container").animate({height: headerHeight}, 5000, "easeInOutQuart");
And I am using jQuery-1.10.2.js, the most recent one. 我正在使用最新的jQuery-1.10.2.js。
Any thoughts? 有什么想法吗?
// //
I added the easing plug-ins like this, and it works in the jsfiddle: 我添加了这样的缓动插件,它在jsfiddle中工作:
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.easing.compatibility.js"></script>
<script src="js/jquery.easing.min.js"></script>
And the script code is like this: 脚本代码是这样的:
$("#top_slide").slideUp({ duration: 5000, easing: "easeInOutQuart" });
And I still get this error: 而且我仍然收到此错误:
Uncaught TypeError: Object #<Object> has no method 'easeInOutQuart'
rr.run jquery.js:9216
l jquery.js:8914
x.fx.timer jquery.js:9511
er jquery.js:8981
a jquery.js:9305
x.extend.dequeue jquery.js:3948
(anonymous function) jquery.js:3991
x.extend.each jquery.js:657
x.fn.x.each jquery.js:266
x.fn.extend.queue jquery.js:3984
x.fn.extend.animate jquery.js:9316
x.fn.(anonymous function) jquery.js:9442
(anonymous function) playingWithjQuery.php:38
c jquery.js:3048
p.fireWith jquery.js:3160
x.extend.ready jquery.js:433
q
Thanks in advance! 提前致谢!
// //
I changed it to just a single div, here is my html and here is the error page : 我把它改成了一个div,这是我的html,这里是错误页面 :
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.easing.compatibility.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
$(function() {
$("div").slideUp(5000, "easeInOutQuart");
});
</script>
<div style="height: 300px; width: 300px; background: green;"></div>
</body>
** Also I am using a localhost server instead of actually being online, would that affect the plugins even though I have the source files on my local server?
** 我也使用localhost服务器而不是实际上在线,即使我的本地服务器上有源文件,这会影响插件吗?
JQuery only offers one easing function as standard, other ones are part of the easing plugin . JQuery只提供一个缓动函数作为标准,其他的是缓动插件的一部分。 This includes easeInOutQuart.
这包括easyInOutQuart。
According to the jQuery API, .slideUp
call should look something like this: 根据jQuery API,
.slideUp
调用应该如下所示:
$("#top_slide").slideUp({ duration: 5000, easing: "easeInOutQuart" });
jsfiddle: http://jsfiddle.net/L9D8e/ jsfiddle: http : //jsfiddle.net/L9D8e/
Edit - this version of the html definitely works!
编辑 - 这个版本的HTML绝对有效!
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js></script>
</head>
<body>
<script>
$(function() {
$("div").slideUp(5000, "easeInOutQuart");
});
</script>
<div style="height: 300px; width: 300px; background: green;"></div>
</body>
</html>
使用缓动插件,您可以执行
$("#top_slide").slideUp({duration:5000, easing:"easeInOutQuart"});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.