CODEWITHSUNDEEP
javascriptjqueryhtmlcss
g5wx
g5wx

Reputation: 720

Delaying css transition with jquery

I am trying to delay a css transition of an element based on delay function + additional 0.2s applied on it so it slides 0.2s later than initial delay of main wrapper. I add a class to it which gives it a transition to slide from right to left.

If i disable this additional delay (transition-delay), then the element slides fine when initial delay fires up. If i leave it on and add 0.2s additional delay on this inner div then the transition won't work.

Current progress on fiddle and jquery:

(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",
    });
});

Upvotes: 3

Views: 161

Answers (2)

Chitrang
Chitrang

Reputation: 2114

Div with class inner has already CSS transform property. So, you need to change CSS selector for class 'left' to select through id so that it has higher specificity

Change

.left {
  transform: translateX(20%);
}

to

#testDiv.showIt .left {
  transform: translateX(20%);
}

JSFiddle: https://jsfiddle.net/7qdyeq0x/5/

Upvotes: 1

MysterX
MysterX

Reputation: 2368

I placed your actions with the ".inner" to the delay timeout.Try with the next code 

 $.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");
                // Show inner
                $(".inner").addClass(settings.trans + " " + settings.timing + " " + settings.speed);

            }, settings.delayIt);
        };


    });
}

Upvotes: 1

Related Questions