Переход Javascript работает только после второго наведения

Question

Я новичок в Javascript. Я хочу, чтобы изображение постепенно уменьшалось, а затем изменялось до первоначального размера. У меня есть работы, но только после наведения изображения на 2 раза и более.

Чтобы быть яснее, когда я наводил указатель мыши на изображение в первый раз, он совершает очень резкий переход, но после этого работает. Он сделал то же самое при использовании CSS вместо этого.

Что у меня есть это:

 function enlargeImage() { 
     var logo = document.getElementById('logoname'); 
     logo.style.opacity = '0.7'; 
     logo.style.height = 'auto'; 
     logo.style.width = '800px'; 
     logo.style.transition = '0.7s'; 

    } 

    function resizeImage() { 
     var logo = document.getElementById('logoname'); 
     logo.style.opacity = '1'; 
     logo.style.height = 'auto'; 
     logo.style.width = '900px'; 
    } 

Должен ли эта работа? Или я закодирован таким образом, в котором я не должен был иметь?

Answer 1

Лично мне нравится оставлять анимации и эффекты, подобные этим, в CSS и оставлять функциональность Javascript.

#yourImage { 
 
    width: 150px; 
 
    height: 150px; 
 
    transition: transform .25s ease, opacity .5s ease; 
 
} 
 
     
 
#yourImage:hover { 
 
    opacity: 0.5; 
 
    transform: scale(0.5); 
 
}

<img src="http://www.w3schools.com/css/trolltunga.jpg" alt="" id="yourImage">

Когда изображение завис над трансформирую и изменить размер изображения до 0,5% от исходного размера и 0,5% от его первоначальной непрозрачности.

Я также использую свойство перехода, чтобы установить, как быстро изображение переходит при изменении размера или при изменении непрозрачности.

Answer 2

Отмена была из-за метки высоты внутри кода javascript.
изменить

height: auto 

Into height:400px или какое-то значение, а не авто.

function enlargeImage() { 
 
     var logo = document.getElementById('logoname'); 
 
     logo.style.opacity = '0.7'; 
 
     logo.style.height = '300px'; 
 
     logo.style.width = '400px'; 
 
     logo.style.transition = '0.7s'; 
 

 

 
    } 
 

 
    function resizeImage() { 
 
     var logo = document.getElementById('logoname'); 
 
     logo.style.opacity = '1'; 
 
     logo.style.height = '600px'; 
 
     logo.style.width = '600px'; 
 
     logo.style.transition = '0.7s'; 
 

 
    }

img { 
 
    height:300px; 
 
    width:400px; 
 
}

<img onmouseover="resizeImage()" onmouseout="enlargeImage()" src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg' id="logoname">