禁用单击直到悬停动画完成答案

【问题标题】：disable click until hover animation complete禁用单击直到悬停动画完成
【发布时间】：2011-07-22 00:43:37
【问题描述】：

$('#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，并且都有动画。我怎样才能做到这一点，当用户悬停在任一 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 上，则会产生不良影响，例如闪烁和消失

【问题讨论】：

标签： jquery click hover jquery-animate

【解决方案1】：

试试

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

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

}
});

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

【讨论】：

【解决方案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
              });
            })
        });         
    });

【讨论】：

【解决方案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));
})

【讨论】：