Анимация CSS при изменении атрибута jQuery

Question

У меня есть контейнер изображений, который в основном находится в оболочке для ноутбука. Я пытаюсь оживить скриншот на ноутбуке (слайд влево/вправо) каждый раз, когда SRC изменяет

HTML

<img class="img-responsive laptop-screen" src="img-container/demo-laptop.png"> 

функция JQuery

$("a").click(function(){ 
    $(".laptop-screen").attr("src", newsrc); 
}); 

СРК изменения по щелчку, но новое изображение сразу появляется. Есть ли способ, я могу двигать его в без того, чтобы создать несколько тегов IMG с display:none;

Answer 1

Плетение:http://kodeweave.sourceforge.net/editor/#9f75750659b0d82a63bb885b17058c98

Вы действительно можете сделать анимацию в чистом CSS без JavaScript. Все, что я использую для JavaScript, в данном случае - для переключения класса и источника изображения.

var changeIMG = document.querySelector(".changeIMG") 
 
var oldSrc = 'http://i.telegraph.co.uk/multimedia/archive/02223/bear-cub-toy_2223075k.jpg' 
 
var newSrc = 'http://image.mlive.com/home/mlive-media/width960/img/grandrapidspress/photo/2015/03/20/-6328b3da95a15820.JPG' 
 

 
function changeSrc() { 
 
    var imgElement = document.querySelector(".laptop-screen") 
 
    var src = imgElement.src 
 

 
    imgElement.src = src === oldSrc ? newSrc : oldSrc 
 
    
 
    $('.laptop-screen').toggleClass('loaded preload') 
 
} 
 

 
changeIMG.onclick = function() { 
 
    changeSrc() 
 
} 
 
changeSrc()

body { 
 
    padding: 1em; 
 
    text-align: center; 
 
} 
 
img { 
 
    margin: auto; 
 
} 
 

 
.changeIMG { 
 
    display: block; 
 
} 
 

 
.loaded, .preload { 
 
    display: block; 
 
    width: 0; 
 
    margin: 1.1em auto 0 auto; 
 
} 
 
.loaded { 
 
    animation: scale .3s normal forwards; 
 
} 
 
.preload { 
 
    animation: scaleIMG .3s normal forwards; 
 
} 
 

 
@keyframes scale { 
 
    to { 
 
    width: 52%; 
 
    } 
 
} 
 
@keyframes scaleIMG { 
 
    to { 
 
    width: 52%; 
 
    } 
 
}

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/> 
 
<script src="http://code.jquery.com/jquery.min.js"></script> 
 
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script> 
 

 
<button type="button" class="btn changeIMG btn-primary"> 
 
    Change Source 
 
</button> 
 

 
<img class="loaded laptop-screen">

Answer 2

Вы можете использовать .load(fn):

$('a').click(function(e) { 
 
    e.preventDefault(); 
 
    var newsrc = 'https://cdn2.iconfinder.com/data/icons/browsers/Chrome.png'; 
 
    $(".laptop-screen").hide().attr("src", newsrc).load(function() { 
 
    $(this).slideDown(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#'>change the image.</a><br> 
 
<img class='laptop-screen' src='https://cdn2.iconfinder.com/data/icons/browsers/IE.png' alt=''>

Answer 3

вы можете попробовать

$("a").click(function(){ 
    $(".laptop-screen").hide('slide').attr("src", newsrc).show('slide'); 
}); 

если вы не заметили слайд .. может b е вам необходимо включить JQuery-щ