悬停 淡入 淡出

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.php#

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

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

Answer 1

hover() 接受两个函数参数，一个用于mouseover，另一个用于mouseout。你只提供了第一个。您需要提供第二个来撤消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属性，你使用opacity来实现效果。

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 代码中添加一个关键部分。我在<img> 标签中添加了“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

如果要进行交叉淡入淡出，您需要两张图像，一张淡入，一张同时淡出。看看有这个效果的page I did。我写的插件就在页面源码中，大家可以看看。这两个图像需要有position: absolute;，以便它们在交叉淡入淡出时占据页面的相同区域。

正如 No Surprises 所说，您只是为鼠标悬停提供了对 hover 的回调，而不是鼠标取消悬停，您可以在此处交叉淡入淡出回到原始状态。

此代码可能有效，记住 CSS 中的绝对定位，并且您可能希望将 CSS 类添加到 backImg，并且图像必须位于订阅悬停事件的离散父元素中：

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

更新

要解决加载缓慢的问题，您需要让 PHP 返回一个包含所有图像的对象，例如（假设它称为 images.php - 将下面的代码放在 <?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);
 });

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