https://stackoverflow.com/questions/1682830
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我想创建经过动作悬停带来的彩色图像，也曾经悬停被删除它消失恢复到原来的形象。
目前它淡出图像不了了之，然后消失在新的。于是，这将留在地方，无论我是否悬停关闭或没有。
//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");
});
});
}
});
}
更新
请在此链接看看：
我想获得的图像交叉淡入上侧翻并向外淡出...
谁能帮助，即时如此接近，我已经花了几个小时，试图让我的头围绕这个...
解决方案 7
OK感谢大家的帮助...我有什么地方...我不完全满意作为它的速度慢于我原本打算，因为IM装载两个图像现将并列一...使用rel属性由它了很多更快becaue我是只加载上悬停...
的图像但这里是一个解决方案的感谢...
//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>
其他提示
hover()需要两个函数的参数，一个用于mouseover，另一个用于mouseout。你只提供第一。你需要提供第二撤消影像互换上mouseout。
如果您希望fadeOut和fadeIn是并发的，不要把fadeIn在fadeOut的回调。只是让他们单独的语句：
$(this).fadeOut("slow");
$(this).attr({ src: largePath }).fadeIn("slow");
您有它的方式，fadeIn没有启动，直到fadeOut完成。这样一来，他们都会在同一时间开始和结束。
我觉得你需要存储的原始图像路径（这是您要淡出回悬停出来，右的），那么它在悬停了恢复。
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);
});
我可以建议： 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代码。我添加了“相对” ATTRS到<img>标签。
您可以做到这一点使用一些额外的代码。在淡出图像的顶部淡入图像位置，不透明度设置为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（）函数的，鼠标悬停在进出迅速将不会导致一系列重复的动画。
如果你想要做淡入淡出，你需要两个图像，一个是衰落，另一个同时被淡出。看看href="http://www.ferraricolor.com" rel="nofollow noreferrer">页我做这个效果
和像没有意外说，你只供给回调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");
}
);
});
}
});
}
我在这里发现了一个问题...
var backImg = $("<img src='" + largePath + "'/>");
这不是一个有效的选择器。尝试这个代替：
var backImg = $('img[src="' + largePath + '"]');
您不想使用<>在你的选择，属性选择器语法应该是这样的：[ATTR =“值”]点击 你应该注意到，我扭转了使用“和”我的代码 - 。这只是我是怎么做的，它的语法上等同没有什么错与您选择报价
在样式表中添加：
.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);
});
此代码应工作......但我没有测试它。可能有错别字。但是，这是它的要点。
