jQuery fade image in и out при нажатии или загрузке

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. Есть ли где-то я могу добавить opacity opacity для этого скрипта или мне нужно добавить совершенно новый скрипт?

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"); 
});