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
– Chris Beck, Commented Sep 9, 2015 at 19:19
possible duplicate of Using setTimeout To Delay A jQuery Animation — TylerH
– TylerH, Commented Sep 9, 2015 at 19:31
jsfiddle.net/7qdyeq0x/3 i didn't got your question properly, though i tried to fix your delay problem — Sachin Kanungo
– Sachin Kanungo, Commented Sep 9, 2015 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
– g5wx, Commented Sep 9, 2015 at 19:36

Chitrang · Accepted Answer · 2015-09-09 20:24:32Z

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 9, 2015 at 20:24

answered Sep 9, 2015 at 20:02

Chitrang

2,1141 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

g5wx Over a year ago

Thanks for explanation and solution :)

MysterX · Accepted Answer · 2015-09-09 19:43:23Z

1

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


    });
}

answered Sep 9, 2015 at 19:43

MysterX

2,3781 gold badge14 silver badges12 bronze badges

Collectives™ on Stack Overflow

Delaying css transition with jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related