Javascript 转换仅在第二次悬停后才起作用

Question

我是 JavaScript 新手。我想让我的图像逐渐变小，然后调整回原来的大小。我所拥有的有效，但只有在将鼠标悬停在图像上两次或更多次之后才有效。

更清楚地说，当我第一次将鼠标悬停在图像上时，它会发生非常突然的过渡，但之后就可以工作了。当使用 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%。

我还使用过渡属性来设置调整图像大小或更改不透明度时图像过渡的速度。