淡入和淡出功能不起作用
fadeIn and fadeOut functions not working
我正在使用纯javascript处理淡入和淡出函数,这是代码:
(function() {
var fx = {
easing: {
linear: function(progress) {
return progress;
},
quadratic: function(progress) {
return Math.pow(progress, 2);
},
swing: function(progress) {
return 0.5 - Math.cos(progress * Math.PI) / 2;
},
circ: function(progress) {
return 1 - Math.sin(Math.acos(progress));
},
back: function(progress, x) {
return Math.pow(progress, 2) * ((x + 1) * progress - x);
},
bounce: function(progress) {
for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11) {
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
},
elastic: function(progress, x) {
return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress);
}
},
animate: function(options) {
var start = new Date;
var id = setInterval(function() {
var timePassed = new Date - start;
var progress = timePassed / options.duration;
if (progress > 1) {
progress = 1;
}
options.progress = progress;
var delta = options.delta(progress);
options.step(delta);
if (progress == 1) {
clearInterval(id);
options.complete();
}
}, options.delay || 10);
},
fadeOut: function(element, options) {
var to = 1;
this.animate({
duration: options.duration,
delta: function(progress) {
progress = this.progress;
return fx.easing.swing(progress);
},
complete: options.complete,
step: function(delta) {
element.style.opacity = to - delta;
}
});
},
fadeIn: function(element, options) {
var to = 0;
this.animate({
duration: options.duration,
delta: function(progress) {
progress = this.progress;
return fx.easing.swing(progress);
},
complete: options.complete,
step: function(delta) {
element.style.opacity = to + delta;
}
});
}
};
window.fx = fx;
})()
我使用以下代码来激活该功能:
document.getElementById('in').addEventListener('click', function() {
FX.fadeIn(document.getElementById('type'), {
duration: 2000,
});
}, false);
但是当我加载页面时,出现激活码错误。
有谁知道我做错了什么?
非常感谢。
通过一些调整,您的代码应该可以正常工作...
- 正如理查德·道尔顿所注意到的,用
fx
而不是FX
来称呼对象。
为所有选项 添加默认值,以防未提供选项(示例代码会引发错误,因为未定义
options.complete
(。例:this.animate({ duration: options.duration || 1000, ... complete: options.complete || function() { }, ... });
在制作动画之前调整样式(想象一下使用
display: none
而不是opacity: 0
隐藏元素(...示例(对于fadeIn
(:element.style.opacity = 0; element.style.visibility = "visible"; element.style.display = "block";
检查是否需要操作(例如,尽管元素已经可见,但仍调用
fadeIn
(:isVisible: function(element) { return element.style.display !== "none" && element.style.visibility !== "hidden" && element.style.opacity !== "0"; } // In fadeIn: if (!this.isVisible(element)) { ... }
下面是带有示例的更正代码:JSFiddle
当然,可以进一步调整一下,处理一些极端情况(例如,如果在元素当前淡出时调用fadeIn
会发生什么?(,我很确定它不适用于所有浏览器(旧IE(...但我希望我为你指出了正确的方向。:)
相关文章:
- 使用复杂数组时Jquery自动完成功能不起作用
- 为什么我的流星每个功能都不起作用
- jQuery点击功能在获取请求后不起作用
- 切换功能不起作用
- 为什么不是'我的修剪功能不起作用
- Angular UI Select2指令搜索功能不起作用
- j查询点击功能在手风琴菜单链接上不起作用
- 为什么这个排序功能在 Safari 中不起作用
- 控制器功能在 Angular.js 中不起作用
- AngularJS 路由功能不起作用
- JavaScript更新功能不起作用
- ScriptX 打印功能在 IE8 中不起作用
- JS表单验证功能不起作用
- 本地存储功能中的图像不起作用
- 复选框树视图功能不起作用
- Web音频-AudioParam调度功能不起作用
- 功能的禁用/启用按钮;不起作用
- JavaScript/jQuery:获取选择功能在Firefox和Chrome中不起作用
- 复选框单击功能不起作用
- Ckeditor插件功能在使用setData(“hai”)之后不起作用;