javascript - jQuery 在单击或加载时淡入和淡出图像

Question

@Phil 给了我这个很棒的脚本，它帮助我摆脱了困境，并且它在我的应用程序中完美运行。但是因为我对 javascript 很陌生，所以我不知道如何使图像以动画方式显示不透明度，并以动画方式显示不透明度。

// jQuery syntactic sugar to run after page loads
$(function () {
    // attach a click event to anything with a data-file attribute
    $("[data-file]").on('click', function (evt) {
        // figure out what was clicked
        var clickedEl = $(evt.target);
        // get the data-file attribute
        var dataFile = clickedEl.attr('data-file');
        var container = $(".bom_container");
        // empty the div
        container.empty();
        // create image element
        var img = $("<img/>").attr("src", dataFile)
        // add it to the container
        container.append(img);
        // or update the background image
        // container.css('background-image','url('+ dataFile +')');
    });
});

单击链接时，这些图像将在容器中打开。但同样，我希望图像能够轻松呈现，而不仅仅是“轰隆隆”出现。我可以在某个地方向该脚本添加动画不透明度，还是必须添加一个全新的脚本？

Answer 1

jQuery 有很棒的 .fadeIn() 和 .fadeOut() 方法来实现这一点。

// jQuery syntactic sugar to run after page loads
$(function () {
    // attach a click event to anything with a data-file attribute
    $("[data-file]").on('click', function (evt) {
        // figure out what was clicked
        var clickedEl = $(evt.target);
        // get the data-file attribute
        var dataFile = clickedEl.attr('data-file');
        var container = $(".bom_container");
        // empty the div
        container.empty();
        // create image element
        var img = $("<img/>").attr("src", dataFile).css("display","none") // <----- see here
        // add it to the container
        container.append(img);
        img.fadeIn(/*duration in ms*/) // <----- see here
        // or update the background image
        // container.css('background-image','url('+ dataFile +')');
    });
});