Question

我希望有人可以帮助我。我在弄清楚如何在图像之间进行漂亮和干净的淡入淡出过渡时遇到了一些麻烦。下面的代码是简化的，但jquery或多或少与我在测试代码中的相同。我希望从div num1的“背景”中的当前图像淡出到下一个图像（下一个图像是点击的缩略图）。目前的代码似乎只为第一个代码执行此操作，此后没有淡入淡出。我如何为我的多张图片做到这一点？提前感谢您的帮助。

JQuery的：

jQuery(document).ready(function() {
    $(".bg_image_thumb").click(function(){
    var thumb_id = this.id;
    var main_href = $("#"+thumb_id).attr('href');
    $("#main_image").attr("src", main_href).fadeIn("slow");
    });
});

的CSS：

#container { position: relative; }
#num1, #num2 { position: absolute;}
#num1 { z-index: 1; }
#num2 { z-index: 2; }

HTML：

<div id="container">
<div id="num1" style="min-height:700px;height:700px;width:700px;"><img id="main_image" src=""></div>
<div id="num2">
<a class="bg_image_thumb" id="bg_image_thumb1" onclick="return false;" href=image1.jpg"><img src="image1.jpg" /></a>
<a class="bg_image_thumb" id="bg_image_thumb2" onclick="return false;" href=image2.jpg"><img src="image2.jpg" /></a>
<a class="bg_image_thumb" id="bg_image_thumb3" onclick="return false;" href=image3.jpg"><img src="image3.jpg" /></a>
</div>
</div>

1

Answer 1

尝试通过以下方式替换您的行：

<a class="bg_image_thumb" id="bg_image_thumb1" onclick="return false;" href="image3.jpg"><img src="image3.jpg" /></a>

小提琴：http://jsfiddle.net/Christophe/4z5sK/1/

Answer 2

您需要将fadeIn代码更改为此类内容;

$("#main_image").fadeOut("slow", function()
{
      $("#main_image").attr("src", main_href).fadeIn("slow");
});

此代码首先隐藏您当前显示的图像，在完成后，它将设置源并显示新图像。

[注释]

这将为您提供fadeOut-then-fadeIn的效果。如果你想要一个fadeIn-fadeOut（同一时间）你需要使用两个控件来设置图像。

在这种情况下，您需要使用两个img控件：

<div id='container'>
    <img id='main_image' src="http://dummyimage.com/300x200/000/fff&text=test1" />
    <img id='main_image_back' />
</div>

$("#main_image_back").attr("src", main_href).hide().fadeIn("slow", function()
{
      $("#main_image").attr("src", $("#main_image_back").attr("src"));
      $("#main_image_back").hide();
});
$("#main_image").show().fadeOut("slow", function(){$(this).show();});

并在你的CSS中：

#container {position:relative;}
#main_image_back {display:none; position:absolute; top:0; left:0;}

jsFiddler链接：http://jsfiddle.net/ke4kM/7/

从缩略图淡入图像

2 个答案: