I want to store two or more events in a variable like element-selectors.
or - Is there any another way to do that? let me know.
The way I know:
let del = $('.delete');
let auto = $('.auto');
let show = $('.show');
del.fadeIn().delay(3000).fadeOut(function() {
auto.fadeIn().delay(3000).fadeOut(function() {
show.fadeIn().delay(3000).fadeOut();
});
});<div style="display: none" class="delete">delete</div>
<div style="display: none" class="auto">auto</div>
<div style="display: none" class="show">show</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>But I want something like this:
let envent = fadeIn().delay(3000).fadeOut();
del.envent {
auto.envent {
show.envent;
};
};
You do that by writing a reusable function:
function mySequence(el, callback) {
return el.fadeIn().delay(3000).fadeOut(callback);
}
Then to use it, you pass del into it:
mySequence(del, function() {
// Do the next thing
});
Live Example (with shorter delay):
function mySequence(el, callback) {
return el.fadeIn().delay(300).fadeOut(callback);
}
let del = $('.delete');
let auto = $('.auto');
let show = $('.show');
mySequence(del, function() {
mySequence(auto, function() {
mySequence(show);
});
});<div style="display: none" class="delete">delete</div>
<div style="display: none" class="auto">auto</div>
<div style="display: none" class="show">show</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>You can also do a little jQuery plugin if you like:
$.fn.mySequence = function(callback) {
return this.fadeIn().delay(3000).fadeOut(callback);
};
Then to use it, you use it like any other jQuery function:
del.mySequence(function() {
// Do the next thing
});
Live Example (with shorter delay):
$.fn.mySequence = function(callback) {
return this.fadeIn().delay(300).fadeOut(callback);
};
let del = $('.delete');
let auto = $('.auto');
let show = $('.show');
del.mySequence(function() {
auto.mySequence(function() {
show.mySequence();
});
});<div style="display: none" class="delete">delete</div>
<div style="display: none" class="auto">auto</div>
<div style="display: none" class="show">show</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>If you want to avoid directly passing callbacks in, you could use native Promises or jQuery's Deferred object. Here's a plugin that returns a Deferred's promise:
$.fn.mySequence = function() {
var d = $.Deferred();
this.fadeIn().delay(3000).fadeOut(d.resolve.bind(d));
return d.promise();
};
Then to use it, you use it like any other jQuery function:
del.mySequence()
.then(function() {
// Do the next thing
});
Live Example (with shorter delay):
$.fn.mySequence = function() {
var d = $.Deferred();
this.fadeIn().delay(300).fadeOut(d.resolve.bind(d));
return d.promise();
};
let del = $('.delete');
let auto = $('.auto');
let show = $('.show');
del.mySequence()
.then(function() {
return auto.mySequence();
})
.then(function() {
return show.mySequence();
});<div style="display: none" class="delete">delete</div>
<div style="display: none" class="auto">auto</div>
<div style="display: none" class="show">show</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments