0

我从@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。有没有什么地方可以为这个脚本添加动画不透明度，还是我必须添加一个全新的脚本？

4

2 回答 2

2

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 +')');
    });
});
于 2013-05-24T17:12:07.120 回答
1

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

$('#img_selector').fadeOut('fast', function() {
   $(this).attr("src", "newsource.jpg")
   .fadeIn("fast");
});
于 2013-05-24T17:10:34.297 回答