javascript - 禁用鼠标悬停直到动画完成

Question

我使用 jquery caroufredsel 创建一个 slider ，然后将鼠标悬停事件附加到项目上，这样当鼠标悬停在项目上时，它将使所选项目居中。这是脚本

$(document).ready(function(){
    $('#carousel-popular').carouFredSel({
        width: '100%',
        items: 5,
        scroll: 1,
        auto: false,
        prev: '#prev-popular',
        next: '#next-popular',
        pagination: '#pager'
    });


    $('#carousel-popular img').off('mouseover').on('mouseover', function(){
        var self = this;
        $(this).attr('data-url', '<?php echo site_url('video/video_display'); ?>/'+$(this).data('vid'));
        $('#carousel-popular').trigger('slideTo', [$(this), -2]);

        $('#home-sidebar').load('<?php echo site_url('home/get_imdb');?>/'+$(this).data('vid'), function(){
            $('#carousel-popular img').removeClass('selected');
            $(self).addClass('selected');
        });
//      $('.caroufredsel_wrapper').css({
//          "background" : "url(<?php echo base_url(); ?>images/shadow.png) center 95% no-repeat"
//      });
    });

    $('#carousel-popular img').on('click', function(){
        if($(this).hasClass('selected')){
            window.location = $(this).data('url');
        }
    })

    var sbHeight = $('body').height() - $('#header').height();
    $('#home-sidebar').css({
        "height": sbHeight+'px'
    });

    setTimeout(function(){
        $('#carousel-popular img').eq(0).trigger('mouseover');
    }, 500);
});

问题是当一个项目滑动到居中时，另一个图像捕捉到鼠标悬停，因为鼠标指针仍在轨道上。如何在所选图像居中之前禁用此鼠标悬停事件？

fiddle

Answer 1

我不完全确定这个问题，但你可以试试这个:

$('#carousel a').on('mouseenter', function(){
    $('#carousel').trigger('slideTo', [$(this), -2]);
});

当鼠标移到元素上时触发动画