jquery如何animate防止叠加 例如我把鼠标不断移入移出 效果就会不断重复,如何防止呢?

Posted 2023-05-13

stop() 方法停止当前正在运行的动画。

语法：

$(selector).stop(stopAll,goToEnd)

stopAll    可选。规定是否停止被选元素的所有加入队列的动画。    

goToEnd    

可选。规定是否允许完成当前的动画。

该参数只能在设置了 stopAll 参数时使用。

当开始另一个动画之前将之前的动画停止；

例如：

$("#start").click(function()
    $("#box").stop().animate(height:300,"slow");
);
//如果是连续点击则会先停止上一个动画，开始下一个动画

参考技术A 在你的点击事件中加上一个判断假设产生动画效果目标的是target，那么你要加上这个判断if(!target.is(":animated"))他会确保你的动画只会在上一个动画结束后才能产生，可以保持动画的完整性，但是连续点击时会有反映迟钝的感觉而$("#id").stop(true,false).animate(,1000);这个则是会强制你的上一动画立即结束并到达动画执行结束时状态同时来运行下一次动画，会造成动画脱节不太美观，但是反应迅速用哪个你看着 参考技术B animate方法前加个.stop()追问

能举一个例子吗 谢谢

追答

$(element).hover(function()
$(this).stop().animate(height:100,200);
,function()
$(this).stop().animate(height:10,200);
)

本回答被提问者采纳

如何防止 UIView.animate 被调用

【中文标题】如何防止 UIView.animate 被调用

【英文标题】：How to prevent a UIView.animate from being called

【发布时间】：2018-10-09 09:09:53

【问题描述】：

我想重现 WhatsApp 按钮在正在进行的通话视图上的行为：它们在出现几秒钟后消失，而每次用户点击屏幕时，它们都会再次出现。

假设我有这两个按钮，

@IBOutlet weak var callButton: UIButton!
@IBOutlet weak var muteButton: UIButton!

这是输入viewDidAppear以及用户点击屏幕时调用的sn-p：

self.callButton.alpha = 1.0
self.muteButton.alpha = 1.0
delay(4.0) 
    UIView.animate(withDuration: 1.0, animations: 
        self.callButton.alpha = 0.0
        self.muteButton.alpha = 0.0
    , completion:  _ in )


func delay(_ seconds: Double, completion: @escaping () -> ()) 
    let popTime = DispatchTime.now() + Double(Int64(Double(NSEC_PER_SEC) * seconds)) / Double(NSEC_PER_SEC)
    DispatchQueue.main.asyncAfter(deadline: popTime) 
        completion()
    

使用此代码，如果用户在上次通话后 3 秒点击屏幕，按钮仍会在 1 秒后消失。所以我想知道如果同时再次点击视图，我如何阻止以前的UIView.animate。

感谢您的帮助

【参考方案1】：

首先，当 Apple 在UIView.animate 中向您提供了延迟方法时，您为什么要创建延迟方法？

现在，要实现你想要的，只需使用一个标志来检查该方法是否已经被调用过一次并阻止该方法调用。

var animating = false

func yourAnimateMethod() 
    if !animating 
        animating = true
        UIView.animate(withDuration: 1, delay: 4, options: .curveLinear, animations: 
            self.callButton.alpha = 0.0
            self.muteButton.alpha = 0.0
        )  (completed) in
            if completed 
                animating = false