3

HTML要素のリストが一列に並んでいます。各リストアイテムには、次のようなハイパーリンク内の画像が含まれています。

<ul class="products">
  <li><a href="#" title="Title 1"><img src="image.jpg" /></a></li>
  <li><a href="#" title="Title 2"><img src="image.jpg" /></a></li>
  <li><a href="#" title="Title 3"><img src="image.jpg" /></a></li>
</ul>

リストアイテムの上にマウスを置くと、基本的に、jQueryを使用してリンクのタイトルを含むツールチップをフェードインしたいと思います。したがって、最初のリストアイテムの上にマウスを置くと、DOMは次のように変わります。

<ul class="products">
  <li>
    <div class="product-title-ribbon">Title 1</div>
    <a href="#" title="Title 1"><img src="image.jpg" /></a>
  </li>
  <li><a href="#" title="Title 2"><img src="image.jpg" /></a></li>
  <li><a href="#" title="Title 3"><img src="image.jpg" /></a></li>
</ul>

マウスアウトすると、ツールチップがフェードアウトする必要があります。実際には、標準のツールチップよりも複雑になるため、既成のソリューションを使用しているだけではありません。私はそれを理解し、前進するために適応できるように、メカニックに頭を悩ませようとしています。

とにかく、私は基本を機能させていますが、アイテムをマウスで移動するとツールチップがフェードインおよびフェードアウトし続けるため、醜いです。私はここでフィドルをしました：http：//jsfiddle.net/YcuYY/。ちらつきやキューイングなしでツールチップがはるかに洗練されるように、これを改善する方法を誰かが提案できますか？これでソートされたので、私はそれを最終要件に適応させ続けることができるはずです。

var productRibbon = $('<div class="product-title-ribbon"></div>');

$('.products li').hover(function() {
    var productTitle = $('a',this).attr('title');
    productRibbon.text(productTitle);
    $(this).prepend(productRibbon);
    productRibbon.fadeIn(500);
},function () {
    $(productRibbon,this).fadeOut(500);
});

どうもありがとうございました！

4

3 に答える 3

1

hoverそれが間違っていると示唆する人々の言うことを聞かないでください。彼らはjQueryの公式ドキュメントを読んでいません。この.hover()メソッドは、mouseenterイベントとmouseleaveイベントの両方のハンドラーをバインドします。

そしてそれは完全に元気で正しい

.on簡単にするためにこのメソッドを使用し、 mouseenterandmouseleaveイベントを委任します。

また、element productRibbon<li>は価値がないため、繰り返し処理しません。アニメーションがジャンプするのを防ぐために、それぞれの内部にすぐに追加します。

jsBinデモ

$('.products li').each(function(){     
   $(this).append('<div class="product-title-ribbon">'+ $('a',this).attr('title')+'</div>');      
}).on('mouseenter mouseleave',function( e ) {    
   $(this).find('.product-title-ribbon').stop().fadeTo(400, e.type=='mouseenter'?1:0);      
});

.stop()アニメーションの蓄積を防ぎながら、現在登録されているイベント
e.type=='mouseenter'?1:0に応じて不透明度レベルを決定し、CSS内に 追加しますe
display:none;.product-title-ribbon

于 2013-01-11T17:11:47.933 に答える
1

jsFiddleを少し変更しましたhttp://jsfiddle.net/3ppqv/

変更点は次のとおりです。1）CSS-「product-title-ribbon」クラスに「display：none」を追加

.products li {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #ccc;
}
.product-title-ribbon {
  position: absolute;
  width: 120px;
  top: 40px;
  left: -10px;
  background: #f00;
  display: none;
}

2）JavaScript、ホバー時にdivをローカル変数にし、フェードアウトのセレクターをcssクラスを使用するように変更しました。

$('.products li').hover(function() {
    var productRibbon = $('<div class="product-title-ribbon"></div>');
        var productTitle = $('a',this).attr('title');
        productRibbon.text(productTitle);
        $(this).prepend(productRibbon);
    productRibbon.fadeIn(500);
    },function () {
        $('.product-title-ribbon',this).fadeOut(500);
    });
于 2013-01-11T17:14:11.770 に答える
0

.hover（）は使用しないでください。編集：fadeIn / fadeOutではなく不透明度を使用するか、以下で指摘するように、stop（1）の代わりにstop（）を使用します。

$('.products li').on({
    mouseenter: function() {
        var productTitle = $(this).find('a').attr('title');

        productRibbon.text(productTitle);
        $(this).prepend(productRibbon);
        productRibbon.stop().animate({opacity:1},500);
    },
    mouseleave: function () {
        $(this).find(productRibbon).stop().animate({opacity:0},500);
    }
});
于 2013-01-11T17:01:27.013 に答える