Question

我一直在尝试为上一个/下一个效果that I saw at this website创建一个效果，但无法正确实现，并想知道是否有人可以帮助我。

Here it's mine so that you can inspect it and see the code，它在Firefox中运行不正常，只有你快速传递鼠标它才会闪烁并且工作非常糟糕。我想达到与最终幻想网站相同的效果。

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

由于我只是想要正确地达到效果，所以我没有悬停状态，只有在使用mouseenter时才反转箭头。

Answer 1

尝试在每个＆lt;内部添加span。 a＆gt; 。

将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});
});

刚试过，它可以完美修复＆＃34;快速鼠标移动＆＃34;问题。

上一个/下一个jQuery效果

2 个答案: