1

この Web サイトから着想を得て: http://www.designchemical.com/lab/jquery/demo/jquery_demo_slick_jquery_sliding_captions.htm

以下のコードを使用して独自のバージョンを作成しました。

$(document).ready(function(){

  $(".transparencyOverlay").css("display", "none");
  $(".thumbnailTextContainer").css("display", "none");

  $(".contestantFirst, .contestant").hover(function(){
    $(this).children(".transparencyOverlay, .thumbnailTextContainer").slideToggle('slow');
  },function(){
    $(this).children(".transparencyOverlay, .thumbnailTextContainer").slideToggle('slow');
  });

});

問題は、画像内で連続してホバーすると、カーソルが画像の外にある場合でもアニメーションが実行され続けることです。これを解決する方法を知っている人はいますか?

4

2 に答える 2

1

mouseenter を使用してアニメーションをトリガーし、次に mouseout を使用してjQuery の stop() 関数で停止します。一般的な例:

$('div').mouseenter(function(){
    $(this).slideToggle('slow');
});

$('div').mouseout(function(){
    $(this).stop();
});

jsfiddle

于 2013-06-27T08:06:14.900 に答える
0

jQuery .stop( [clearQueue ] [, jumpToEnd ] ) 関数を見てください。

http://api.jquery.com/stop/

于 2013-06-27T08:01:32.317 に答える