如何将动画例程转换为通用的、可重用的 jQuery 函数
How can I turn an animation routine into a generic, re-usable jQuery function?
我首先开发了一个简单的jQuery动画,后来我创建了一个jQuery函数以实现可重用性,它将做同样的事情。这是一个演示:http://jsfiddle.net/SpMns/
我的代码正在工作,但并不可靠:当我单击按钮运行代码时,没有任何反应;单击它两到三次将启动动画。为什么第一次不工作?
请看一下我的日常工作,告诉我需要纠正哪个领域:
jQuery.fn.busyToggle = function(ImgLoadSrc, marginBottom, opacity, speed,
easing, callback) {
var oDiv = $("<div id='BusyBox'><img src='" + ImgLoadSrc
+ "' alt='Loading...'/><div><em>Loading Wait...</em></div></div>");
if ($("#BusyBox").exists() == false) {
//alert('div not exist');
oDiv.css("background", "-moz-linear-gradient(center top , #F1F2F2 0%, #F1F2F2 100%) repeat scroll 0 0 transparent");
oDiv.css("border-top-left-radius", "5px");
oDiv.css("border-top-right-radius", "5px");
oDiv.css("bottom", "0px");
oDiv.css("font-size", "0.8em");
oDiv.css("font-style", "normal");
oDiv.css("font-weight", "normal");
oDiv.css("left", "50%");
oDiv.css("margin-left", "-45px");
oDiv.css("padding-top", "20px");
oDiv.css("position", "fixed");
oDiv.css("text-align", "center");
oDiv.css("width", "90px");
oDiv.css("height", "50px");
oDiv.css("margin-bottom", "-70px");
oDiv.css("background-repeat", "no-repeat");
oDiv.css("background-position", "center center");
oDiv.data('IsUp', 1)
oDiv.appendTo('body');
}
// i work with jquery data function for achieving toggle behaviour
if (oDiv.data('IsUp') == 1) {
oDiv.data('IsUp', 0);
return this.stop(true).animate({
marginBottom: marginBottom,
opacity: opacity
}, {
queue: false,
duration: speed,
complete: callback
});
}
else {
oDiv.data('IsUp', 1);
return this.stop(true).animate({
marginBottom: marginBottom,
opacity: opacity
}, {
queue: false,
duration: speed,
complete: callback
});
}
};
$(document).ready(function() {
$("#Process").click(function() {
if (flag == 1) {
$('#BusyBox').busyToggle('images/loader.gif', 0, 1, 500, 0, function() {
alert('div visible')
});
flag = 0;
}
else {
$('#BusyBox').busyToggle('images/loader.gif', -70, 0, 500, 0, function(){
alert('div hide')
});
flag = 1;
}
return false;
});
});
什么可能导致它在第一次运行时失败?
问题是这种
用法在 #busyToggle
在第一次调用时,$('#BusyBox') 成为一个空数组,这意味着这个(在 #busyToggle 中)也是空数组。
更好的问题解决方案是这样调用 busyToggle:
$('#Process').busyToggle('images/loader.gif', 0, 1, 500, 0, function() {
alert('div visible')
});
并在函数中使用 $('#BusyBox') 代替这个。
你可以在那里找到所有代码:http://jsfiddle.net/ubmCt/8/
PS:我还在ready函数中添加了以下行,否则它将无法在大多数浏览器中运行
变量标志 = 1;
相关文章:
- 执行ajax成功函数-jQUERY
- 函数jquery.html()不提供数据属性集值
- 将变量放入ajax函数JQuery
- 函数jquery的未定义返回
- 如何在嵌套函数jquery上保持变量的值不变
- 用我的函数jquery给出数据/参数
- Firefox在调用函数(jquery)时冻结
- 在传递节时触发一个函数 - jquery
- 循环执行数组函数jQuery
- 在函数中调用另一个函数JQuery
- 对象不是函数-Jquery/JavaScript
- TypeError:对象不是函数-jquery
- 获取函数jQuery设置的属性
- 从函数jquery获取更新的变量值
- 切换而不是悬停函数jQuery
- 函数jQuery.animation()运行了两次行,但不起作用
- 使用函数 jQuery 获取变量
- 自执行函数 jquery 与 JavaScript 的区别
- 从回调函数 -JQuery 获取返回值
- 一个接一个地执行函数 JQUERY