Question

当用户点击小缩略图图像时，我想在同一页面上有一个更大的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()将其放入新路径

我该怎么做？

Answer 1

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

如果你可以尝试：

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

Answer 2

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

Answer 3

不确定我是否抓住了你需要但是这应该没问题，试试：

  $(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

        });

        });

切换然后同时淡化图像

3 个答案: