这是一个很好的简单代码,但我想弄清楚如何为novy.fadeIn(2000)
设置变量。例如,有一天我的js文件有300行,我想从一个地方改变变量 - > fadeIn
到fadeOut
或类似的东西。
var novy = $('<div/>', {id:'namaste'});
var text = {textAlign : 'center', color : '#fff', fontSize: 'xx-large'}
// var example = novy.fadeIn(2000) this is not working
novy.appendTo('body').text('this code is .ITCHI.').css(text).hide();
$(document).on('click', function(){
novy.fadeIn(2000); // example;
})
为了更好的观点,请看这里:https://jsfiddle.net/t305qap2/
你给出的例子对我来说有点牵强,但要实现你的要求,你可以做以下两件事之一:
在专用函数中包含公共代码
var fade = function (element, duration) {
element.fadeIn(duration);
}
这将让您调用fade(novy, 2000)
并根据需要交换底层动画调用。
将函数而不是结果存储在变量中
你看,var example = novy.fadeIn(2000)
不起作用的原因是因为它存储了在该元素上调用fadeIn
的结果,这是元素本身。 fadeIn
仅仅具有动画的副作用。如果要存储对函数的引用而不是结果,JS允许这样做。看这里:
var novyFader = novy.fadeIn // typeof novyFader === 'function' => true
novyFader.call(novy, 2000)
您希望将该行分配给函数并将其存储为变量。然后,您可以在将来将该功能更改为其他值
所以创建一个这样的clickFunction,返回一个函数
var clickFunction = function() { return function(){novy.fadeIn(2000);} }
现在将您的点击更改为此
$(document).on('click', clickFunction);
此时您的代码应该工作相同。
将来你可以将clickFunction分配给其他一些函数
clickFunction = function() { return function() {novy.fadeOut(2000);} }
但是您可能还需要再次设置document.on回调
HTH