悬停淡入淡出

Question

我正在尝试创建一个悬停在动作上，该动作会带来彩色图像，而且一旦悬停被删除，它就会淡出回原来的图像。

目前，它会将图像淡出为空，然后淡入新图像。无论我是否将鼠标悬停，它都将保持在原位。

//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");
       });
      });
     }
    });
   }

更新：

请查看此链接：

http://www.yellostudio.co.uk/temp/index.html php#

我正在尝试让图像在翻转时交叉淡入淡出，并在淡出时淡出...

任何人都可以帮忙吗，我非常接近，我花了几个小时试图解决这个问题...

Answer 1

hover() 采用两个函数参数，一个用于 mouseover，另一个用于 mouseout。您只提供了第一个。您需要提供第二个来撤消鼠标移开时的图像交换。

如果您希望 fadeOut 和 fadeIn 并发，请勿将 fadeIn 放在 fadeOut 的回调中>。只需将它们设为单独的语句即可：

$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");

按照您的方式，fadeIn 在 fadeOut 完成之前不会开始。这样，它们就会同时开始和结束。

Answer 2

我认为您需要存储原始图像路径（这是您想要在悬停时淡出的路径，对吧），然后在悬停时恢复它。

var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('img', $d).hover(function() {
    var largePath = $(this).attr("rel");
    $(this).data('orig', $(this).attr('src') );
    $(this).fadeOut("slow", function() {
         $(this).attr({ src: largePath }).fadeIn("slow");
     });
},function() {
    var origPath = $(this).data('orig');
    $(this).fadeOut("slow", function() {
         $(this).attr({ src: origPath }).fadeIn("slow");
     });
});

假设使用“明亮”图像作为 src 属性，并且您使用不透明度来实现效果。

var $d = $(html).hide().appendTo('#bg');
$('img',$d).css('opacity',0.33);
           .hover( function() {
               $(this).fadeTo('slow',1.0);
            }, function() {
               $(this).fadeTo('slow',0.33);
            });

Answer 3

我可以建议： http://colorpowered.com/blend/

它会做你想做的事情。

---

编辑：
好吧，首先，我肯定会更改代码的 ajax 部分，让它通过 json 返回所有图像（更好的是我会在后端执行此操作，但是，我不确定您的网站如何设置）。不管怎样，你似乎不必要地淡出了其他图像。只需将彩色图像放置在其他图像上方并进行绝对定位即可。也许你的代码看起来像这样：

Javascript:

$.ajaxSetup({cache:false});
$('.hoverImg').live('mouseover',function() {
   $hovered = $(this);
   var colorPath = $hovered.attr("rel");
   var rndId = Math.floor(Math.random()*100000);
   var $colorImg = $('<img />');
   $colorImg
       .hide()
       .addClass("fader")
       .attr('src',colorPath)
       .attr('id','img_'+rndId)
       .css({position:'absolute',zIndex:10});
   $hovered.css({zIndex:9}).data('overImgId',rndId).before($colorImg);
   $('#img_'+rndId).stop().fadeIn("slow");
});
$('.hoverImg').live('mouseout',function() {
    var rndId = $(this).data('overImgId')
    $('#img_'+rndId).stop().fadeOut("slow");
});
$.getJSON('random.php',{numBoxes:totalBoxes},function(json) {
    if(json.length > 0) {
        $.each(json,function(i,val) {
            $(val).hide().appendTo('#bg').find('img').addClass('hoverImg');
        });
    }
});

PHP:

<?php //random.php (really simplified, probably)
if(isset($_GET['numBoxes']) && !empty($_GET['numBoxes'])) {
    /*
        Get all the html stuff you need into an array...
        Could look something like:
        $imgs = array(
            '<div><img src="foo.jpg" rel="color_foo.jpg" /></div>',
            '<div><img src="bar.jpg" rel="color_bar.jpg" /></div>'
        );
    */
    echo json_encode($imgs);
}

这基本上应该可以工作。那里可能有一些错别字之类的东西，但据我所知，它应该可以工作。当然，根据您的情况，您可能需要调整/更改其中的一些内容。

祝你的项目好运！

重要编辑：我忘记在 PHP 代码中添加关键部分。我将“rel”属性添加到 标记中。

Answer 4

您可以使用一些额外的代码来完成此操作。将淡入图像放置在淡出图像的顶部，不透明度设置为 0。将悬停代码添加到淡入图像（它位于顶部，因此可以获取事件）。

$('#top-image').hover(function() {
$(this).stop().fadeTo(1000, 1);
$('#bottom-image').stop().fadeTo(1000, 0);
},
function() {
$(this).stop().fadeTo(1000, 0);
$('#bottom-image').stop().fadeTo(1000, 1);
});

两个图像都会淡入和淡出，并且使用 stop() 函数，鼠标快速进出不会导致一系列重复的动画。

Answer 5

如果要进行交叉淡入淡出，则需要两张图像，一张正在淡入，另一张同时淡出。看一下我制作的具有此效果的页面。我写的插件就在页面源代码中，所以你可以看一下。两个图像需要具有 position:absolute; 以便它们交叉淡入淡出时可以占据页面的相同区域。

正如 No Surprises 所说，您只为鼠标悬停提供对 hover 的回调，而不是为鼠标取消悬停提供回调，后者是您将交叉淡入淡出回原始状态的回调。

这段代码可能会起作用，记住 CSS 中的绝对定位，并且您可能想要向 backImg 添加 CSS 类，并且图像必须位于订阅悬停事件的离散父元素中：

for (var i=0; i < totalBoxes; i++){
    $.ajax({
        url: "random.php?no=",
        cache: false,
        success: function(html) {
            $(html)
                .hide()
                .appendTo('#bg')
                .fadeIn('slow')
                .children('img').each(function() {
                    var img = $(this);
                    var largePath = img.attr("rel");
                    var backImg = $("<img src='" + largePath + "'/>");
                    img.after(backImg);

                    img.parent().hover(
                        function() { // over
                            backImg.stop().fadeIn("slow");
                            img.stop().fadeOut("slow");
                        },
                        function() { // out
                            backImg.stop().fadeOut("slow");
                            img.stop().fadeIn("slow");
                        }
                    );
                });
        }
    });
}

Answer 6

我在这里发现了一个问题...

var backImg = $("<img src='" + largePath + "'/>");

这不是一个有效的选择器。请尝试以下操作：

var backImg = $('img[src="' + largePath + '"]');

您不想使用 <>在您的选择器中，属性选择器语法应如下所示： [attr="value"]
您应该注意，我在代码中颠倒了 ' 和 " 的使用 - 这就是我的做法，它在语法上是相同的。您选择的引号没有任何问题。

Answer 7

好的，谢谢大家的帮助...我得到了某个地方...我不太高兴，因为它比我最初预期的要慢，因为我现在加载两个图像而不是一个...使用 rel 属性使它变得很多更快，因为我只在悬停时加载图像...

但这里有一个解决方案，谢谢大家...

          //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) {

                    var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
                    $('#colour img').css("opacity", 0);
                    $('img', $d).hover(function() { 
                        $(this).stop().fadeTo(700, 1);
                    },function() {
                        $(this).stop().fadeTo(700, 0);
                    });

                }
            });
        }

和我的 php 打印...

<div class="pf-box">
    <a href="#">
    <div class="black"><img src="'.$image_folder.'/'.$image_name.'.jpg" alt="'.$image_name.'" border="0" /></div>
    <div class="colour"><img src="'.$image_folder.'/'.$image_name.'-c.jpg" alt="'.$image_name.'" border="0" /></div>
    </a>
  </div>

Answer 8

在你的样式表中添加：

.colour {
  display:none;
}

然后让你的成功函数读取：

var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
$('.pf-box', $d).hover(function() {
  $('.colour', $(this)).fadeIn("slow");      
},function() {
  $('.colour', $(this)).fadeOut("slow");      
});

UPDATE

要解决加载缓慢的问题，你需要让你的 PHP 返回一个包含所有图像的对象，如下所示（假设它名为 images.php -- 将下面的代码放入 ) 中（你想使用 json_encode() 但他使用的是较旧版本的 PHP）：

header('Content-type: application/json');
echo '{
  {'black' : 'url', 'colour' : 'url'},
  {'black' : 'url2', 'colour' : 'url2'}
}';

然后在 javascript 中你想要：

//generate all the boxes
$.get('images.php',function(data){
  for (var i=0; i < totalBoxes; i++){
      var randomImage = data[Math.floor(Math.random() * data.length)];
      $('<div class="pf-box"><img class="black" src="' + randomImage['black'] + '" /><img class="colour" src="' + randomImage['colour'] + '" /></div>').hide().appendTo('#bg').fadeIn('slow').filter('.colour').css("opacity", 0);
  }
 },'json');

 //add the hover behavior to all the elements
 $('.pf-box').hover(function() {
   $('.colour',$(this)).stop().fadeTo(700, 1);
 },function() {
   $('.colour',$(this)).stop().fadeTo(700, 0);
 });

这段代码应该可以工作...但我还没有测试过。可能有错别字。但这就是它的要点。