我可以在不使用Jquery UI的情况下获得Jquery Pulsate Effect吗？ [英] Can I get Jquery Pulsate Effect without using Jquery UI?

问题描述

我遇到过无法使用Jquery UI的原因。我试图在不使用Jquery UI的情况下获得Jquery UI Pulsate Effect。与此链接类似， http://docs.jquery.com/UI/Effects/Pulsate。我搜索了很多但找不到任何东西。

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.

推荐答案

我不知道原始UI代码是什么样的，但是这是使用animate函数的超级简单实现：

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

检查下面的演示或 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>

这篇关于我可以在不使用Jquery UI的情况下获得Jquery Pulsate Effect吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！