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 +')');
    });
});

单击链接时，这些图像将在容器中打开。但同样，我希望这些图片能够轻松实现，而不仅仅是BOOM APPEAR。有什么地方我可以为这个脚本添加动画不透明度，还是我必须添加一个全新的脚本？

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 +')');
    });
});

Answer 2

在更改图像src之前，您可以淡出图像，更改源，然后淡入新图像。

$('#img_selector').fadeOut('fast', function() {
   $(this).attr("src", "newsource.jpg")
   .fadeIn("fast");
});

jQuery在点击或加载时淡入淡出图像

2 个答案: