使用jquery延迟css转换

我试图延迟一个基于延迟函数的元素的css过渡+附加0.2s应用于它，所以它比主包装器的初始延迟延迟0.2s。我给它添加了一个类，给它一个从右向左滑动的transition。

如果我禁用这个额外的延迟(transition-delay)，那么当初始延迟触发时，元素会正常滑动。如果我保留它并在这个内部div上添加0.2秒的额外延迟，那么过渡将无法工作。

jquery和fiddle的最新进展:

(function ($) {
    $.fn.testPlugin = function (options) {
        var settings = $.extend({
            showDiv: false,
            delayIt: null,
            trans: null,
            timing: null,
            speed: null,
        }, options);
        return this.each(function () {
            var self = this;
            // Show main
            if (settings.showDiv == true) {
                setTimeout(function () {
                    $(self).addClass("showIt");
                }, settings.delayIt);
            };
            // Show inner
            $(".inner").addClass(settings.trans + " " + settings.timing + " " + settings.speed).css({
                "transition-delay" : settings.delayIt / 1000 + 0.2 + "s", // if i delete this delay then inner div slides fine
            });
        });
    }
}(jQuery));
$(document).ready(function () {
    $("#testDiv").testPlugin({
        showDiv: true,
        delayIt: 500,
        trans: "left",
        timing: "ease",
        speed: "fast",
    });
});