отключить щелчок до завершения анимации - PullRequest
2 голосов
/ 24 марта 2011
$('#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, которые имеют событие click и hover, и оба имеют анимацию.Как я могу сделать так, чтобы когда пользователь наводил курсор на 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 до завершения клика, это имеет нежелательный эффект,например, мигание и исчезновение вещей

Ответы [ 3 ]

4 голосов
/ 24 марта 2011

попробуй

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

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

}
});

рабочая демоверсия http://jsfiddle.net/RSZYd/

0 голосов
/ 24 марта 2011

Это может сработать для вашего требования:

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));
})
0 голосов
/ 24 марта 2011

Вы можете вызвать событие щелчка в событии при наведении, как это:

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