2

一見単純な問題を修正する方法がわかりません。アルバムカバーにカーソルを合わせると、( i ) アイコンがフェードインします ( i ) アイコンにカーソルを合わせると、ツールチップが表示されますが、そのままではなく、1.2 秒後にフェードアウトします。( i ) アイコンの上にカーソルを置いたときにツールチップが表示されたままになり、マウスがアイコンを離れるとフェードアウトするようにするにはどうすればよいでしょうか。

例: http://www.midnightlisteners.com

私のコード:

//      ( i ) Icon

  $(".play, .more-info").mouseenter(function(){
        clearTimeout($(this).data('timeoutIds'));
        $(this).next(".more-info").fadeIn(600);
    }).mouseleave(function(){
        var someElement = $(this);
        var timeoutIds = setTimeout(function(){
            someElement.next(".more-info").fadeOut('150');
        }, 1200); // giving a shorter time will reduce the fadeout effect
        //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        someElement.data('timeoutIds', timeoutIds); 
    });

// ツールチップ

  $(".more-info").mouseenter(function(){
      clearTimeout($(this).data('timeoutId'));
      $(this).find(".the-tooltip").fadeIn('150');
  }).mouseleave(function(){
      var someElement = $(this);
      var timeoutId = setTimeout(function(){
          someElement.find(".the-tooltip").fadeOut('150');
      }, 1200);
      //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
      someElement.data('timeoutId', timeoutId); 
  });
4

1 に答える 1

1

これを試して

$(function(){
    var timeoutIds=0;  
    $(".play").on('mouseenter', function(){
        $(this).next(".more-info").fadeIn(600);
    }).on('mouseleave', function(){
        var someElement = $(this);
        timeoutIds = setTimeout(function(){
            someElement.next(".more-info").fadeOut('150');
        }, 1200); 
    });

    $(".more-info").mouseenter(function(){
        clearTimeout(timeoutIds);
        $(this).find(".the-tooltip").fadeIn('150');
    }).mouseleave(function(){
        var someElement = $(this);
        timeoutId = setTimeout(function(){
            someElement.find(".the-tooltip").fadeOut('150');
        }, 300);
    });
});​

デモ(ソースの変更により、デモは動作しなくなりました。)

于 2012-09-10T18:29:54.190 に答える