jquery 插件用于向 dom 元素添加或删除类答案

【问题标题】：jquery plug in to add or remove class to a dom elementjquery 插件用于向 dom 元素添加或删除类
【发布时间】：2014-12-19 12:42:39
【问题描述】：

可以创建一个 jquery 插件，允许向 dom 元素添加或删除特定类，并在 onComplete 调用另一个函数。我这样做是为了避免使用此处解释的延迟：css3 and jquery load page slider effect

我可以这样使用的东西：

myFunction('#domElement', addClass/removeClass, classToAddOrRemove, callBackFunctionOnComplete);

【问题讨论】：

$(domElement).addClass(addClass).removeClass(removeClass) 不起作用？
不确定你的意思，但 jQuery UI 为addClass/removeClass 实现了自己的方法，例如：api.jqueryui.com/addclass 或者你可以扩展任何特定的 jQuery 方法。也就是说，您最好清楚地解释您在寻找什么
是的，但我必须延迟因为类有过渡，所以我必须延迟工作。但我在一些慢速设备上的浏览器有问题。
我正在创建一个带有滑块效果的 ajax 加载页面。我在链接中解释了这一点：stackoverflow.com/questions/27538279/…
您可以使用.delay() 和.queue() 或超时。您能否提供一个在线示例来复制您的问题？

标签： javascript jquery css jquery-plugins delay

【解决方案1】：

我假设您正在使用 css 转换来执行此操作，那么为什么不删除该类，然后在运行回调之前检查所有转换事件是否完成。

http://jsfiddle.net/7cdh11qw/

var doClassyStuff = function(node, method, theClass, callback){
    $(node)[method](theClass);
    $(node).one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
        callback();
    });
}

doClassyStuff('#domElement', 'removeClass', 'someClass', function(){
    console.log("class removed");
});

【讨论】：

我会使用 one() 而不是 bind()，但现在有意义 ;)
one() 不是on() 因此避免绑定多个类似的处理程序
这是漫长的一天 :)
差不多了，但是当我制作滑块效果时，我不想要空格。因此，如果我等待过渡停止，我就会遇到这个问题
我使用 5 个类别来屏幕，向右，向左，过渡时间为 0.8s 和 to-next，to-prev 没有过渡时间