同时切换然后淡化图像答案

【问题标题】：switching and then fading an image simultaneously同时切换然后淡化图像
【发布时间】：2012-11-19 17:53:19
【问题描述】：

当用户单击小缩略图时，我希望在同一页面上使用更大的 div 元素来显示该图像。到目前为止，它适用于以下代码：

$(document).ready(function () {
    $("img#thumb").click(function () {              //when image with ID thumb is clicked change src 
    var imgpath = $(this).attr("src");
    $("img#cover").attr("src", imgpath);
});

});

但是，我现在希望旧图像淡出，同时根据用户单击的缩略图切换新图像。我通过让 jQuery 将 src 文件保存到一个变量来跟踪单击的拇指，然后使用 .attr() 将其放入新路径中

我该怎么做？

【问题讨论】：

标签： jquery html fading

【解决方案1】：

不确定我是否找到了你需要的东西，但这应该没问题，试试吧：

  $(function(){
        $("img#thumb").bind('click',function () {               
        var img = $(this).clone(); //this clones the img, so you do not need to re-load that using src path
        $(this).fadeOut(500);
        $("img#cover").hide().html(img).fadeIn(500); //remove .hide() segment if you just are hiding by css rules

        });

        });

【讨论】：

谢谢你很有帮助。单击拇指后，我希望已经存在的图像立即切换到新图像“后面”，而现在“旧”图像淡出。

【解决方案2】：

我猜你的意思是淡出封面图片。

如果你可以试试：

$("img#cover").fadeOut();
$("img#cover").attr("src", imgpath);

【讨论】：

【解决方案3】：

你应该是on事件而不是jquery的click事件。您甚至可以利用 live，但现在已弃用。

【讨论】：

【解决方案4】：

这是我对您要完成的任务的解释：DEMO。

HTML

<img class="thumb" src="/img/logo.png" width="100" />
<img class="thumb" src="http://www.wpclipart.com/sign_language/thumbs_up_large.png" width="100" />

<div class="cover">
    <img id="cover" width="400"/>
    <img id="cover-old" width="400"/>
</div>

Javascript

$(function() {
    $("img.thumb").on('click', function() { //when image with ID thumb is clicked change src 
        var imgpath = $(this).attr("src");
        $("#cover-old").attr('src', $("#cover").attr('src'));
        $("#cover-old").show();
        $("#cover").hide();
        $("#cover").attr("src", imgpath);
        $("#cover-old").fadeOut('slow');
        $("#cover").fadeIn('slow');
    });
});

CSS

.cover {
    position: relative;

}
.cover img {
    position: absolute;
}

【讨论】：

你所有的脚本都会重新加载图像，如果是相同的路径，这就是你重新加载的原因？
如果这是一个问题，您可以在替换之前验证src 属性是否不同。
我正在制作一个画廊，因此会有 5 个缩略图 div 元素，因此当用户单击拇指时，画廊会在主取景器中“放大”图像。
是的，谢谢，这正是我试图描述的想法。非常感谢！