Delaying css transition with jquery

Question

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

Please include the code in the text of the question, not only the fiddle. — Chris Beck, Sep 09 '15 at 19:19
possible duplicate of [Using setTimeout To Delay A jQuery Animation](http://stackoverflow.com/questions/1817621/using-settimeout-to-delay-a-jquery-animation) — TylerH, Sep 09 '15 at 19:31
https://jsfiddle.net/7qdyeq0x/3/ i didn't got your question properly, though i tried to fix your delay problem — Sachin Kanungo, Sep 09 '15 at 19:32
thanks Sachin for trying - i've edited my question, hope it's clearer now. If you delete the additional transition delay in fiddle you'll see that transform from right to left works. If i leave the delay it doesnt. — g5wx, Sep 09 '15 at 19:36
`transform` property given by `left` class is not applied because `inner` div is already having `transform` property specified through id selector. You may want to look into CSS [`specificity`](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) — Chitrang, Sep 09 '15 at 19:54
Just wondering, why are you not using CSS transitions? They have delay built into them as well and are GPU accelerated — Xander Luciano, Sep 09 '15 at 19:57

score 1 · Answer 1 · answered Sep 09 '15 at 19:43

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);
        };


    });
}

Chitrang · Accepted Answer · 2015-09-09T20:24:32.703

1

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/

edited Sep 09 '15 at 20:24

answered Sep 09 '15 at 20:02

Chitrang

2,079
1
16
18

Thanks for explanation and solution :) – g5wx Sep 09 '15 at 20:27

Delaying css transition with jquery

2 Answers2