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

Posted 2023-05-08

【中文标题】禁用单击直到悬停动画完成

【英文标题】：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 上，则会产生不良影响，例如闪烁和消失

【参考方案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));
)