jquery - 带有淡入/淡出的文本到图像翻转

Question

我在这里找到并修改了一种创建文本到图像翻转的好方法：http: //jsfiddle.net/pkZAW/12/

    $( function() {
  $("#imglink").hover(
    function () {
      $(this).attr('small',$(this).html());
      $(this).html($(this).attr('full'));
    },
    function () {
       $(this).html($(this).attr('small'));
    }
  );
});​

但是，我需要淡入淡出的过渡，就像这里的缩略图一样：http: //lydiafraserward.co.uk/index.php ?page=produce

经过大量搜索，我无法将此过渡添加到脚本中：-？.. 有任何想法吗..？

Answer 1

我认为这种情况不需要 live() 。我不会在 mouseleave 函数上使用淡出，因为动画会叠加。

你也可以试试这个：

$( function() {
    $("#imglink").hover(
    function () {
        $(this).attr('small',$(this).html());
        $(this).stop(false,true).fadeOut(250,function() {
            $(this).html($(this).attr('full'));
            $(this).stop(false,true).fadeIn(250);
        });
   }, function () {
        $(this).html($(this).attr('small'));

   });
  });

编辑：使用锚标签周围的 span 标签修复闪烁效果：演示：http: //jsfiddle.net/LYjvp/1/