上一個/下一個jQuery效果

我一直在試圖爲上一個/下一個效果創建一個效果that I saw at this website，但無法正確實現，並且想知道是否有人可以幫助我。上一個/下一個jQuery效果

Here it's mine so that you can inspect it and see the code，它在Firefox中工作不正常，只是它快速傳遞鼠標，它閃爍並且工作非常糟糕。我想達到與最終幻想網站相同的效果。

我試過也使用jQuery UI隱藏和顯示，但無法使它在Firefox和Opera上正常運行。

由於我只是試圖達到正確的效果，我沒有懸停狀態，只有在使用mouseenter時纔會反轉箭頭。

2013-01-20 Arbusto

把它的上一個按鈕，在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-20 21:50:00 Brahma

非常感謝John！它的工作正如我所期待的那樣。我只有一個問題，並且它不適用於Mac的Firefox（v18.0.1），它就像竊聽一樣，一旦你進入鼠標就像激活兩種狀態（mouseenter和mouseleave）。 – Arbusto

嘗試使用Dimitri的提示和我一起添加無生命的包裝，它將觸發'mouseenter'和'mouseleave'事件以及一個將製作所有動畫內容的範圍。您可以編輯'bxslider.js'中的'appendControls'函數併爲新的跨度添加一些樣式。 – Brahma

我已經完成了，它的工作非常完美！再次感謝您提供的非常有用的幫助，並花時間幫助我，我非常感謝！ – Arbusto

嘗試在每個內部添加跨度 < a>。

添加鼠標輸入到您的圖片並使其生效。圖像/背景應該在範圍內。

像這樣（未經）：

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

PS：如果你避免盜鏈我很欣賞。

來源

2013-01-20 19:41:15

嗨Dimitri，謝謝你的回覆。我已經完成了，現在它可以在每個瀏覽器上正常工作。我不能做的是當你用鼠標快速進出停止並返回而不是繼續動畫時，嘗試停止，但我做錯了。我應該在哪裏使用它？ – Arbusto

我看到你已經解決了這個問題。請+1 John Miller和我的答案。 –

是的，非常感謝。我以前試過這樣做，但它說我需要15的聲望才能做到這一點，對不起。 – Arbusto

上一個/下一個jQuery效果

回答

相關問題