我正在尝试创建一个悬停在动作上，这会带来彩色图像，并且一旦悬停被移除，它就会淡化回原始图像。
目前，它将图像淡化为零，然后淡化新图像。无论是否悬停，都会保留原位。
//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");
});
});
}
});
}
请看一下这个链接：
我试图让图像在翻转时越过fadein，然后在fadeout上越过......
任何人都可以提供帮助，我非常接近，而且我花了几个小时的时间试图了解这个......
答案 0 :(得分：1)
hover()有两个函数参数，一个用于mouseover，另一个用于mouseout。你只提供了第一个。您需要提供第二个以撤消mouseout上的图像交换。
如果您希望fadeOut和fadeIn并发，请不要将fadeIn放在fadeOut的回调中。只需将它们作为单独的陈述：
$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");
您拥有它的方式，fadeIn在fadeOut完成之前无法启动。这样，它们将同时开始和结束。
答案 1 :(得分：1)
我建议：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”attrs添加到<img>标签。
答案 2 :(得分：1)
我认为你需要存储原始图像路径（这是你想要在悬停时淡出的东西，右边），然后在悬停时恢复它。
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);
});
答案 3 :(得分：0)
如果你想做一个交叉淡入淡出，你需要两个图像，一个正在淡入，一个同时淡出。看看具有这种效果的page I did。我写的插件就在页面源代码中，所以你可以看看它。这两个图像需要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");
}
);
});
}
});
}
答案 4 :(得分：0)
您可以使用其他一些代码执行此操作。将淡入图像放在淡出图像的顶部，将不透明度设置为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（）函数，快速进入和离开不会导致一系列重复的动画。
答案 5 :(得分：0)
在样式表中添加：
.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);
});
这段代码应该有用......但我还没有测试过。可能存在拼写错误。但这是它的要点。
答案 6 :(得分：0)
我在这里发现了一个问题...
var backImg = $("<img src='" + largePath + "'/>");
这不是有效的选择器。试试这个：
var backImg = $('img[src="' + largePath + '"]');
您不想使用＆lt;＆gt;在您的选择器中，属性选择器语法应如下所示：[attr =“value”]
你应该注意到我在我的代码中颠倒了'和'的使用 - 这就是我的工作方式，它在语法上是相同的。你选择引号没有错。
答案 7 :(得分：0)
好的，谢谢你们所有人的帮助......我到了某个地方......我并不完全高兴，因为它比我最初想要的慢，因为我现在加载了两个图像，因为它们使用了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>