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, . I have search a lot but couldn't find anything.

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.

• javascript
• jquery

• 1 Why can't you use it? Just take the relevant parts out of it – Bergi Commented Feb 18, 2013 at 10:42
• Have you thought about using CSS3? Not sure on your browser support requirements but you can create effects like this quite easily. Have a look here daneden.me/animate for some inspiration. – r8n5n Commented Feb 18, 2013 at 10:44

3 Answers 3

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>

you could copy the source of the jquery pulsate effect and add that to your project.

But whats the point, if you can add that file to your project, why not just add the original jquery ui pulsate file.

You don't have to downlaod the whole of jquery-ui, just the parts you want : http://jqueryui.com/download/.

There is a standalone jquery plugin for the pulsate effect here:

https://github.com/jsoverson/jquery.pulse.js