禁用點擊，直到懸停動畫完成

Question

$('#div1, #div2').click(function(){ 

//Code to execute onclick 


    }); 


$('#div1, #div2').hover(function(){ 

    $(this).animate({ 
     'filter':'alpha(opacity=100)', 
     '-moz-opacity':'1', 
     '-khtml-opacity':'1', 
     'opacity': '1'}, 
     250, 
     function(){ 
    $(this).animate({ 
      'filter':'alpha(opacity=75)', 
      '-moz-opacity':'0.75', 
      '-khtml-opacity':'0.75', 
      'opacity': '0.75'}, 
      500) 
     }); 
    }); 

我有兩個div，包含點擊事件和懸停事件，並且都有動畫。我怎樣才能讓這個當用戶將鼠標懸停在任格： -

- the click event doesnt work until the hover animation is complete 
- and then the hover animation doesnt work until the click animation is complete 

目前，如果用戶點擊DIV1，然後徘徊在DIV2之前，點擊完成它的不良影響，例如閃爍事物消失

Answer 1

嘗試

$('#div1, #div2').click(function(){ 

if(('#div1:animated, #div2:animated').length == 0) 
{ 
//Code to execute onclick 

} 
}); 

工作演示 http://jsfiddle.net/RSZYd/

Answer 2

你可以這樣調用的懸停事件的單擊事件：

$('#div1, #div2').hover(function(){ 
    $(this).unbind('click'); //unbind first 
    $(this).animate({ 
     'filter':'alpha(opacity=100)', 
     '-moz-opacity':'1', 
     '-khtml-opacity':'1', 
     'opacity': '1'}, 
     250, 
     function(){ 
    $(this).animate({ 
      'filter':'alpha(opacity=75)', 
      '-moz-opacity':'0.75', 
      '-khtml-opacity':'0.75', 
      'opacity': '0.75'}, 
      500, 
      function(){ 
       $(this).click(function(){ 
       //Code to execute onclick 
       }); 
      }) 
     });   
    }); 

Answer 3

這可能工作出你的需求：

function fxhover($this) 
{ 
    $this.unbind('click'); 
    $this.animate({/*somecode*/},100,function() { 
     animate({/*somecode*/},100, function(){ 
      $this.bind('click',function(){fxclick($this);})  
     } 
    }) 
} 
function fxclick($this) 
{ 
    $this.unbind('hover'); 
    $this.animate({/*somecode*/},100,function(){ 
     $this.hover(function(){ 
      fxhover($this); 
     }) 
    }) 
} 
$('#div1, #div2').hover(function(){ 
    fxhover($(this)); 
}) 
$('#div1, #div2').click(function(){ 
    fxclick($(this)); 
})