帮助悬停功能

任何帮助，将不胜感激...帮助悬停功能

我想创建一个彩色照片褪色通过从黑色和白色的影响。淡入淡出的作品，但它的褪色的黑色和白色的第一个，我不想要... ID喜欢它出现好像颜色正在通过。然后，一旦它离开它，它应该恢复到我目前不做的原始图形。

下面的代码完美的作品除了我上面提到的部分...

//Loop through the images and print them to the page 
for (var i=0; i < totalBoxes; i++){ 
    $.ajax({ 
     url: "random.php?no=", 
     cache: false, 
     success: function(html) { 
      // following line I originally suggested, but let's make it better... 
      //$('#bg').append(html).fadeIn('slow'); 
      // also note the fine difference between append and appendTo. 
      var $d = $(html).hide().appendTo('#bg').fadeIn('slow'); 
      $('img', $d).hover(function() { 
       var largePath = $(this).attr("rel"); 
       $(this).fadeOut("slow", function() { 
        $(this).attr({ src: largePath }).fadeIn("slow"); 
       }); 
      }); 
     } 
    }); 
}

来源

2009-11-04 Andy

谢谢格雷格，我注意到这已被编辑，但我无法看到变化？我粘贴的代码，它并没有改变！ – Andy 2009-11-04 14:59:47

可以提供两个函数悬停（超过，出）事件。您目前只使用“over”功能。 “out”功能被忽略（因为你没有提供），这就是为什么你看不到淡出效果。

您寻找的效果不起作用，因为fadeOut效果在调用回调函数之前等待动画完成。你想要两个效果同时执行。

这种效果会更难完成。

首先你必须有2个图像元素。一个包含颜色，一个包含黑白图像。

$(this).fadeOut("slow"); 
$("otherImageElement").fadeIn("slow");

现在。我不打算研究一切，但是。这样做会在动画过程中立即在“this”图像元素的右侧显示“otherImageElement”。显然不是你想要的。我相信“otherImageElement”将不得不放在与原始图像“相对”的位置，以使其中一个出现在另一个之上。

来源

2009-11-04 15:18:21

我刚刚在谷歌搜索“jquery交叉淡入淡出过渡”。这有大量的点击，我敢肯定，你可以找到一些东西来帮助你。 – 2009-11-04 15:22:17

好的感谢布拉德，虐待尝试和这工作到我的代码，看看我怎么... – Andy 2009-11-04 15:58:51

我试图将鼠标悬停功能，但不断得到一个空白页，这显然是由语法错误造成的。如何将以上所述的内容合并到我的原始代码中？ – Andy 2009-11-04 16:12:23

再次感谢布拉德您的输入...我喜欢你走近它的方式......我希望这是去上班:)

它产生一个空白的屏幕再次对不起......这是我的代码...

  function switch(element) { 
      var originalPath = $(element).attr("src"); 
      var switchToPath = $(element).attr("rel"); 
      $(element).attr({ src: originalPath }); 
      $(element).fadeOut("slow", function() { 
        $(element).attr({ src: switchToPath }).fadeIn("slow"); 
      } 
     } 

     //Loop through the images and print them to the page 
     for (var i=0; i < totalBoxes; i++){ 
      $.ajax({ 
       url: "random.php?no=", 
       cache: false, 
       success: function(html) { 
        // following line I originally suggested, but let's make it better... 
        //$('#bg').append(html).fadeIn('slow'); 
        // also note the fine difference between append and appendTo. 
        var $d = $(html).hide().appendTo('#bg').fadeIn('slow'); 
        $('img', $d).hover(switch(this), switch(this)); 
       } 
      }); 
     }

来源

2009-11-04 20:34:32 Andy

帮助悬停功能

回答

相关问题