我遇到了由于某种原因无法使用 Jquery UI 的情况。我正在尝试在不使用 Jquery UI 的情况下获得 Jquery UI 脉冲效果。与此链接类似,http://docs.jquery.com/UI/Effects/Pulsate http://docs.jquery.com/UI/Effects/Pulsate。我搜索了很多但找不到任何东西。
我不知道原始的 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 http://jsfiddle.net/dfsq/4HUjn/1/.
$("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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)