幻灯片转换前的Jquery循环运行功能

Question

我正在使用jquery循环2进行幻灯片放映。

我正在尝试找到触发函数的方法（addClass）并等待此函数在启动到下一张幻灯片的转换之前完成。

总结一下：

在转型之前

：

1. addClass到我的幻灯片。
2. 然后启动过渡
3. 以及转换完成时
4. removeClass到我的幻灯片。

这是我的代码

/ * MY SLIDESHOW * /

var $slideshow_news = $("#slideshow_news");

$slideshow_news.cycle({

    speed:    300,
    timeout : 0,
    slides : ".slide_news",
    fx: "scrollHorz",
    next :"#next",
    prev : "#prev"

});

转型前：

$slideshow_news.on( 'cycle-before', function( event, opts ) {
    $slideshow_news.addClass('transition');
});

此代码的问题是addClass和下一张幻灯片的转换是同时触发的。我希望在完成addClass之后转换到下一张幻灯片。

使用“循环后”方法，我实现了使用setTimeout函数：

$slideshow_news.on( 'cycle-after', function( event, opts ) {
    setTimeout(function(){
        $slideshow_news.removeClass('transition')
    }, 400);
});

这里是jsfiddle https://jsfiddle.net/xpvt214o/186517/

非常感谢任何帮助。