题
需要一些帮助,请。
我有一行水平缩略图作为一个图像加载,其中通过图像映射引用不同的缩略图图像,如下所示:
<div id="zoom">
<img src="" />
</div>
<div id="collectionindex">
<img src="thumbnail-strip.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="151,0,211,39" href="image1.jpg" alt="" />
<area shape="rect" coords="215,0,275,39" href="image2.jpg" alt="" />
<area shape="rect" coords="279,0,339,39" href="image3.jpg" alt="" />
<area shape="rect" coords="343,0,403,39" href="image4.jpg" alt="" />
<area shape="rect" coords="407,1,467,40" href="image5.jpg" alt="" />
<area shape="rect" coords="471,0,531,39" href="image6.jpg" alt="" />
</map>
</div>
id="zoom" 的 div 中的 IMG 标记是我的 AJAX 缩放窗口,当用户“单击”缩略图时可以显示图像的较大版本。
这是 jQuery 代码,我必须淡入缩放框中缩略图的大版本。
<script type="text/javascript">
$(document).ready(function(){
$("area").click(function(){
var largePath = $(this).attr("href");
$("#zoom img").attr({ src: largePath }).fadeIn("slow"); return false;
});
});
</script>
现在,jQuery 仅在第一次单击缩略图时淡入,其余部分仅在单击时出现,而不是淡入。我希望它能这样工作:
- 用户点击缩略图
- 大图像淡入缩放框
- 用户单击另一个缩略图
- 第一个图像淡出,第二个所选缩略图淡入
- ETC。
我希望我解释清楚了。:) 任何帮助将不胜感激。
解决方案
您只需要在更改路径并将其淡入之前淡出图像......所以你的点击函数应该变成:
编辑: :忘记显示/隐藏动画是异步发生的,因此您需要在淡出时使用回调来触发其余的...代码应该是:
<script type="text/javascript">
$(document).ready(function(){
$("area").click(function(){
var largePath = $(this).attr("href");
$("#zoom img").fadeOut("slow", function() {
$(this).attr({ src: largePath }).fadeIn("slow");
});
return false;
});
});
</script>
其他提示
我是新来的,刚刚看到我对你的回复的评论风格非常糟糕。:P
感谢您的快速回复 - 刚刚尝试了这个,但它看起来像显示新选择的大图像,淡出它,然后再次淡入。
我需要它来:
- 用户选择后淡入第一张图像
- 用户选择下一张图像 > 淡出第一张图像 > 淡入下一张图像
- 等等等等。
不隶属于 StackOverflow