Question

我使用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);
});

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

fiddle

Answer 1

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

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

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

Answer 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);

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

2 个答案: