我有两个函数在元素及其子元素上触发动画(
opacity
和top
),第二个是第一个的回调函数。
它们之间有一个 5 秒的暂停,这是我通过在第二个函数中插入
.delay(5000)
before animate(...)
创建的。
它有效,但我正在寻找一种方法来在第一个函数结束时有 5 秒的暂停。
原因:我使第二个函数的执行取决于buttonstate
变量的值(通过单击按钮设置)。但是该函数在 5 秒延迟之前检查该值,这不好,因为如果在这 5 秒内按下停止按钮,该函数仍然会执行...
function fademove_1(slide_nr) {
$(".slide_inner").css({"top": "70%", "opacity": "0.01"});
$(".slide_" + slide_nr + " .slide_inner").delay(500).animate({
top: "50%",
opacity: 1
}, 700, fadeout_1);
}
function fadeout_1(slide_nr) {
if(buttonstate != "stop"){
$(".slide_" + slide_nr).delay(5000).animate({
opacity: 0.01
}, 2000);
}
我根本找不到办法——我尝试过的一切都不起作用。有什么建议我可以做什么吗?功劳归功于@PitaJ,但以下是我在特定代码中解决该问题的方法。我删除了第二个函数中的延迟,并将其(与
after
动画,如下所示:
function fademove_1(slide_nr) {
$(".slide_inner").css({"top": "70%", "opacity": "0.01"});
$(".slide_" + slide_nr + " .slide_inner").delay(500).animate({
top: "50%",
opacity: 1
}, 700).delay(5000).promise().then(fadeout_1);;
}
function fadeout_1(slide_nr) {
if(buttonstate != "stop"){
$(".slide_" + slide_nr).animate({
opacity: 0.01
}, 2000);
}
如果您想停止动画然后运行它,请尝试
function fadeout_1(slide_nr) {
$(".slide_" + slide_nr).stop(true,true).delay(5000).animate({
opacity: 0.01
}, 2000);
}`
我希望这有帮助。