0

このウェブサイトで見た前/次の効果の効果を作成しようとしましたが、正しく達成できず、誰かが私を助けてくれるかどうか知りたいです.

これは私のものなので、調べてコードを確認できます。Firefoxでは正常に動作せず、マウスをすばやく渡すだけで、ちらつき、動作が非常に悪くなります。Final FantasyのWebサイトと同じ効果を実現したいと思います。

jQuery UI の非表示と表示も使用してみましたが、Firefox と Opera でも正しく実行できませんでした。

私は効果を正しく達成しようとしているだけなので、ホバー状態はありません。使用時に矢印を反転させるだけmouseenterです。

4

2 に答える 2

2

previousNextSlider.js の [戻る] ボタンに配置します。

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

試してみただけで、「クイックマウス移動」の問題を完全に修正できます。

于 2013-01-20T21:50:00.113 に答える
2

各< a >内にスパンを追加してみてください。

mouseEnter を追加して、スパンをアニメーション化します。画像/背景はスパン内にある必要があります。

このようなもの（テストされていません）：

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

ps: ホットリンクを避けていただければ幸いです。

于 2013-01-20T19:41:15.427 に答える