我可以在不使用 Jquery UI 的情况下获得 Jquery 脉动效果吗？答案

【问题标题】：Can I get Jquery Pulsate Effect without using Jquery UI?我可以在不使用 Jquery UI 的情况下获得 Jquery 脉动效果吗？
【发布时间】：2016-06-24 21:18:31
【问题描述】：

由于某种原因，我遇到了无法使用 Jquery UI 的情况。我正在尝试在不使用 Jquery UI 的情况下获得 Jquery UI 脉动效果。与此链接类似，http://docs.jquery.com/UI/Effects/Pulsate。我搜索了很多，但找不到任何东西。

【问题讨论】：

为什么不能用？只需从中取出相关部分
你考虑过使用 CSS3 吗？不确定您的浏览器支持要求，但您可以很容易地创建这样的效果。看看这里daneden.me/animate 以获得一些灵感。

标签： javascript jquery

【解决方案1】：

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

$.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>

【讨论】：

当然：$('div').pulse({times: 4, duration: 500});

【解决方案2】：

您可以复制 jquery 脉动效果的来源并将其添加到您的项目中。

但是重点是什么，如果您可以将该文件添加到您的项目中，为什么不添加原始的 jquery ui pulsate 文件。

您不必下载整个 jquery-ui，只需下载您想要的部分即可：http://jqueryui.com/download/。

【讨论】：

我有很多低内存的移动客户端。
@user960567 你不必下载整个 jquery，只需要下载你想要的部分

【解决方案3】：

这里有一个用于脉动效果的独立 jquery 插件：

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

【讨论】：