我遇到过无法使用Jquery UI的原因。我试图在不使用Jquery UI的情况下获得Jquery UI Pulsate Effect。与此链接类似,http://docs.jquery.com/UI/Effects/Pulsate。我搜索了很多但找不到任何东西。
答案 0 :(得分:14)
我不知道原始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>
答案 1 :(得分:3)
你可以复制jquery pulsate效果的来源并将其添加到你的项目中。
但重点是,如果你可以将该文件添加到项目中,为什么不添加原始的jquery ui pulsate文件。
您不必将整个jquery-ui下载,只需要下载所需的部分:http://jqueryui.com/download/。
答案 2 :(得分:3)
这里有一个独立的jquery插件用于脉动效果: