$(".links").click(function(){
$('.slider').stop(true,false).animate({ right: "0" }, 800, 'easeOutQuint');
}, function() {
$(".slider").stop(true,false).animate({ right: "-200" }, 800, 'easeInQuint');
}, 1000);
我正在网站上建立一个小滑块。滑块位置是right: -200。单击页面上的其他任何right: 0位置right: -200后，它会滑动到我要为其设置动画的位置。
我尝试了所有失败的方法。toggle(slide)效果不错，但看起来不好。
通过JavaScript美化器放置代码（最好对发布的代码进行处理以使其更易于理解）可以实现以下目的：
$(function () {
$(".links")
.click(function () {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
},
function () {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}, 1000);
});
您正在尝试将两个处理程序传递给.click（），并且看起来像是超时或持续时间（1000）。尝试这样的事情：
$(function () {
var toggle;
$(".links")
.click(function () {
toggle = !toggle;
if (toggle) {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
}
else {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
});
更新：要使其滑动，当您单击页面上的任意位置时，它会稍微复杂一些：
$(function () {
var toggle;
$(document).click(function () {
if (toggle) {
toggle = !toggle;
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
$(".links")
.click(function (e) {
e.stopPropagation();
toggle = !toggle;
if (toggle) {
$('.slider')
.stop(true, false)
.animate({
right: "0"
}, 800, 'easeOutQuint');
}
else {
$(".slider")
.stop(true, false)
.animate({
right: "-200"
}, 800, 'easeInQuint');
}
});
$(".slider")
.click(function (e) {
e.stopPropagation();
});
});
这部分：
$(".slider")
.click(function (e) {
e.stopPropagation();
});
在那里没有当您单击隐藏滑杆上的滑块（而不是其他的页面，滑块的外某处），但如果这不是你想要的，那么你可以将其删除。
（可以对代码进行重构，以消除重复并避免多次运行选择器，但它可以达到本示例的目的。此外，由于页面上的所有滑块将同时滑动，因此您现在不能在一个页面上使用多个滑块时间，但我想没关系。）
参见DEMO。
对于使用旧版jQuery的toggle方法，它会更简单，但不幸的是，它在1.8版中已弃用，而在1.9版中已删除。
（顺便说一下，您使用的缓动功能默认情况下在普通jQuery中不可用。如果您使用的是jQuery UI，那么它们将可用，但如果不是，则必须先添加它们，然后才能使用它们。请注意避免无用的“未定义的不是函数”异常。）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句