[英]How can I turn an animation routine into a generic, re-usable jQuery function?
I developed a simple jQuery animation first and later I create a jQuery function for reusability which will do the same thing. 我首先开发了一个简单的jQuery动画,然后创建了可重用性的jQuery函数,该函数将执行相同的操作。 Here is a demo: http://jsfiddle.net/SpMns/ 这是一个演示: http : //jsfiddle.net/SpMns/
My code is working but not reliably so: when I click on the button to run the code, nothing happens; 我的代码正在运行,但无法可靠运行:当我单击按钮运行代码时,什么也没发生; clicking it two or three times will start the animation. 单击它两次或三下将开始动画。 Why wouldn't it work the first time? 为什么第一次不起作用?
Please have a look at my routine and tell me which area I need to rectify: 请查看我的常规,并告诉我需要纠正的区域:
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;
});
});
What could be causing this to fail the first time it's run? 是什么导致它在第一次运行时失败?
The problem are is the this usage in the #busyToggle 这个问题的是这种用法在#busyToggle
On the first call $('#BusyBox') becomes an empty Array, which means that this (in #busyToggle) is also empty Array. 在第一个调用中,$('#BusyBox')变成一个空数组,这意味着它(在#busyToggle中)也是一个空数组。
A better solution to your probelm would be to call busyToggle this way: 一个更好的解决方案是通过以下方式调用busyToggle:
$('#Process').busyToggle('images/loader.gif', 0, 1, 500, 0, function() {
alert('div visible')
});
and use $('#BusyBox') instead of this in your function. 并在函数中使用$('#BusyBox')代替它。
You can find all the code over there: http://jsfiddle.net/ubmCt/8/ 您可以在那找到所有代码: http : //jsfiddle.net/ubmCt/8/
PS: I've also added following line to the ready function, otherwise it won't run in most browsers PS:我还在ready函数中添加了以下行,否则它将无法在大多数浏览器中运行
var flag = 1; var flag = 1;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.