jQuery 悬停时淡入/淡出/淡出，无闪烁或队列

Question

我有一个连续的 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>

当您将鼠标移开时，工具提示需要淡出。它实际上会比标准的工具提示更复杂，因此我不只是使用现成的解决方案；而是使用现成的解决方案。我正在努力了解其机制，以便能够理解它并适应 future 。

无论如何，我已经掌握了基础知识，但它很丑陋，因为当您将鼠标悬停在项目上时，工具提示会不断淡入和淡出。我在这里做了一个 fiddle :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);
});

非常感谢大家!

Answer 1

不要听别人的建议hover是错的。他们不阅读 jQuery 官方文档。.hover()方法绑定(bind) mouseenter 和 mouseleave 事件的处理程序。

而且完全正确

我将只使用 .on为了简单起见，方法并委托(delegate) mouseenter和mouseleave事件。

此外，我不会迭代 element productRibbon 因为它不值得，我会立即将其附加到每个 <li>在每个内部，以防止跳跃动画:

jsBin demo

$('.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将根据当前注册的 e 确定不透明度级别事件
并添加display:none;在你的 CSS 中 .product-title-ribbon