I am attempting to delay a CSS transition for an element by using a delay function, with an additional 0.2s applied to make it slide 0.2s later than the initial delay of the main wrapper. I am applying a class to give it a transition effect to slide from right to left.
When I disable this additional delay (transition-delay), the element slides correctly when the initial delay starts. However, if I leave it on and add an extra 0.2s delay to this inner div, the transition does not work as expected.
You can see my current progress on the interactive demo along with the jQuery code snippet below:
(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", // Removing this additional delay makes the inner div slide smoothly
});
});
}
}(jQuery));
$(document).ready(function () {
$("#testDiv").testPlugin({
showDiv: true,
delayIt: 500,
trans: "left",
timing: "ease",
speed: "fast",
});
});