I have in a situation where I cannot use Jquery UI for a reason. I am trying to do get Jquery UI Pulsate Effect without using Jquery UI. Similar to this link, http://docs.jquery.com/UI/Effects/Pulsate. I have search a lot but couldn't find anything.
jQuery UI position has been replaced with Popper. js.
Description: The pulsate effect hides or shows an element by pulsing it in or out.
jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library that you can use to build highly interactive web applications.
I don't know what original UI code looks like, but this is super simple implementation using animate function:
$.fn.pulse = function(options) {
var options = $.extend({
times: 3,
duration: 1000
}, options);
var period = function(callback) {
$(this).animate({opacity: 0}, options.duration, function() {
$(this).animate({opacity: 1}, options.duration, callback);
});
};
return this.each(function() {
var i = +options.times, self = this,
repeat = function() { --i && period.call(self, repeat) };
period.call(this, repeat);
});
};
$("div").click(function() {
$(this).pulse({times: 4, duration: 500});
});
Check the demo below or this JsFiddle.
$("div").click(function() {
$(this).stop().pulse({times: 4, duration: 300});
});
$.fn.pulse = function(options) {
var options = $.extend({
times: 3,
duration: 1000
}, options);
var period = function(callback) {
$(this).animate({opacity: 0}, options.duration, function() {
$(this).animate({opacity: 1}, options.duration, callback);
});
};
return this.each(function() {
var i = +options.times, self = this,
repeat = function() { --i && period.call(self, repeat) };
period.call(this, repeat);
});
};
div {background-color: green; padding: 20px; display: inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click me</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With