我有一个功能可以在网页上滚动图像。可以在这里看到:
http://leadgenixhosting.com/~intmed/
您可以单击右箭头来推进图像。我遇到了这个问题,我使用了 .unbind() ,以便在图像使用 .animate() 完成之前箭头不可单击,这样它们就不会失去同步。但我不太确定如何使用 .bind() 使箭头再次可点击。
这是该函数当前的样子:
$('#in-right').click(
function(){
$('#in-right').unbind('click');
imageSwitch();
$('#in-right').bind('click');
}
);
我显然错误地实现了绑定(bind)。我怎样才能正确实现它?
这是我的 imageSwitch() 函数:
function imageSwitch(){
current++;
current_image++;
previous_image++;
next++;
two_prev++
if(two_prev >= divs.length){
two_prev = 0;
}
if(current >= gallery_images.length){
current = 0;
}
if(previous_image >= divs.length){
previous_image = 0;
}
if(current_image >= divs.length){
current_image = 0;
}
if(next >= divs.length){
next = 0;
}
$('#'+divs[current_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000})
$('#'+divs[current_image]+'').css('background-image','url('+gallery_images[current]+')');
$('#'+divs[previous_image]+'').animate({left:'-=1020px'},{queue:false,duration:1000});
$('#'+divs[next]+'').animate({left: '+=1020px', top: '-=10000px'}, 1000);
$('#'+divs[two_prev]+'').animate({left: '+=1020px', top: '+=10000px'}, 1000);
}
最佳答案
.bind
要求您向其传递一个函数作为第二个参数。
function clickFunc(){ // Give the event function a name
$('#in-right').unbind('click');
imageSwitch();
$('#in-right').click(clickFunc); // .click is shorthand for `.bind('click',`
}
$('#in-right').click(clickFunc);
编辑:您应该让您的 imageSwich
函数接受回调,这样它就可以在完成动画后重新绑定(bind)该函数。
function imageSwitch(callback){
// code...
}
function clickFunc(){ // Give the event function a name
$('#in-right').unbind('click');
imageSwitch(function(){
$('#in-right').click(clickFunc);
});
}
$('#in-right').click(clickFunc);
为了确保回调在所有动画完成后运行,我们可以使用 jQuery 的 deferreds .
基本上,您希望将从 .animate
返回的对象保存到变量中。然后使用 $.when
和 .then
在正确的时间运行回调。
(顺便说一句,这未经测试)
function imageSwitch(callback) {
var animations = [];
current++;
current_image++;
previous_image++;
next++;
two_prev++
if (two_prev >= divs.length) {
two_prev = 0;
}
if (current >= gallery_images.length) {
current = 0;
}
if (previous_image >= divs.length) {
previous_image = 0;
}
if (current_image >= divs.length) {
current_image = 0;
}
if (next >= divs.length) {
next = 0;
}
animations.push($('#' + divs[current_image] + '').animate({
left: '-=1020px'
}, {
queue: false,
duration: 1000
}));
$('#' + divs[current_image] + '').css('background-image', 'url(' + gallery_images[current] + ')');
animations.push($('#' + divs[previous_image] + '').animate({
left: '-=1020px'
}, {
queue: false,
duration: 1000
}));
animations.push($('#' + divs[next] + '').animate({
left: '+=1020px',
top: '-=10000px'
}, 1000));
animations.push($('#' + divs[two_prev] + '').animate({
left: '+=1020px',
top: '+=10000px'
}, 1000));
if (typeof callback === 'function') {
// Apply is used here because `$.when` expects to passed multiple parameters
$.when.apply($,animations).then(callback);
}
}
延迟和动画演示:http://jsfiddle.net/M58KK/
关于javascript - 如何在我的函数中使用 .bind(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11905403/