jquery - 上一个/下一个 jQuery 效果

Question

我一直在尝试为我在此网站上看到的上一个/下一个效果创建一个效果，但无法正确实现它，并且想知道是否有人可以帮助我。

这是我的，所以你可以检查它并查看代码，它在 Firefox 中不能正常工作，只有你快速通过鼠标它会闪烁并且工作非常糟糕。我想达到和最终幻想网站一样的效果。

我也尝试过使用 jQuery UI 隐藏和显示，但也无法让它在 Firefox 和 Opera 上正确运行。

由于我只是想正确实现效果，因此我没有悬停状态，仅在使用时反转箭头mouseenter。

Answer 1

尝试在每个<a>中添加跨度。

将 mouseEnter 添加到您的并使其为您的跨度设置动画。图像/背景应该在跨度内。

像这样的东西（未经测试）：

$('a').on('mouseEnter', function () {
    $(this).find('span').animate({
        //Animation stuff
    });
});

ps：如果您避免盗链，我将不胜感激。

Answer 2

把它放在previousNextSlider.js中的Previous按钮：

//Previous
$('.bx-prev').on('mouseenter', function(){
    $(this).removeClass(".js-opened").stop().animate({
        'margin-left': '-87px'
        }, {
        duration: 300,
        complete: function(){
            $(this).css({
                'background-image' : 'url(images/nextSliderButton.png)'
            }).addClass(".js-opened").stop().animate({
                'margin-left' : 0
            }, {duration: 100});
        }
    });
}).on('mouseleave', function(){
    if ($(this).hasClass(".js-opened"))
        $(this).stop().animate({
            'margin-left': '-87px'
            }, {
            duration: 100,
            complete: function(){
                $(this).css({
                    'background-image' : 'url(images/previousSliderButton.png)'
                }).removeClass(".js-opened").stop().animate({
                    'margin-left' : 0
                }, {duration: 300});
            }
        });
    else
        $(this).stop().animate({
            'margin-left': 0
            }, {duration: 300});
});

刚刚尝试过，它完美地解决了“快速鼠标移动”问题。