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 或一些值而不是 auto。

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">

Javascript 过渡仅在第二次悬停后有效

Javascript transition works only after second hover

javascript

transition