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，都有动画。我怎样才能使用户在任何一个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

您可以在悬停事件中调用click事件，如下所示：

$('#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));
})

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

3 个答案: