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

Disable mouseover until animation complete

本文关键字：动画 鼠标 悬停      更新时间：2023-09-26

我使用jquery caroufredsel创建一个滑动条，然后将鼠标悬停事件附加到项目上，以便当鼠标悬停在项目上时，它将使所选项目处于中心位置。下面是脚本

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

问题是，当一个项目滑动到中心时，由于鼠标指针仍在轨道上，其他图像捕获了鼠标。如何禁用此鼠标悬停事件，直到选定的图像居中?

小提琴

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

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

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

我很不清楚的问题，这是你想要的:http://jsfiddle.net/8W25g/2/

$('#carousel').carouFredSel({
        items: 4,
        scroll: 1,
        auto: false,
        prev: '#prev-popular',
        next: '#next-popular',
        pagination: '#pager'
    });
var mouseoverFunc=function(){
        $('#carousel a').unbind('mouseover');
        $('#carousel').trigger('slideTo', [$(this), -2]);
    };
var mouseoutFunc=function(){
        setTimeout(function(){
            $('#carousel a').bind('mouseover',mouseoverFunc);    
        },400);
    };
$('#carousel a').bind('mouseover', mouseoverFunc);
$('#carousel a').bind('mouseout', mouseoutFunc);
相关文章：