文本到图像翻转淡入/淡出

时间:2012-11-15 15:12:15

标签: jquery rollovers

我找到并修改了一个很好的方法来创建文本到图像翻转,在这里: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=producing

经过多次搜索,我无法将此过渡添加到脚本中: - ? ..任何想法..?

1 个答案:

答案 0 :(得分:1)

我不认为这种情况需要live()。我不会在mouseleave函数上使用fadeout,因为动画会叠加起来。

你也可以试试这个:

$( 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/