Javascript转换只有在第二次悬停后才能工作

我是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';
    }

---

这样行吗？或者我的编码方式不应该是这样的？

我个人喜欢将这些动画和效果留给CSS，将功能留给Javascript

#你的形象{
宽度：150px；
高度：150像素；
变换：变换。25秒轻松，不透明度。5秒轻松；
}
#yourImage:悬停{
不透明度：0.5；
变换：比例（0.5）；
}

---

我个人喜欢将这些动画和效果留给CSS，而将功能留给Javascript

#你的形象{
宽度：150px；
高度：150像素；
变换：变换。25秒轻松，不透明度。5秒轻松；
}
#yourImage:悬停{
不透明度：0.5；
变换：比例（0.5）；
}

---

断裂是由于javascript代码中的高度标记造成的
改变这个

height: auto

进入高度：400px或某个值而不是自动

函数放大图像（）{
var logo=document.getElementById（'logonName'）；
logo.style.opacity='0.7'；
logo.style.height='300px'；
logo.style.width='400px'；
logo.style.transition='0.7s'；
}
函数resizeImage（）{
var logo=document.getElementById（'logonName'）；
logo.style.opacity='1'；
logo.style.height='600px'；
logo.style.width='600px'；
logo.style.transition='0.7s'；
}

img{
高度：300px；
宽度：400px；
}

---

断裂是由于javascript代码中的高度标记造成的
改变这个

height: auto

进入高度：400px或某个值而不是自动

函数放大图像（）{
var logo=document.getElementById（'logonName'）；
logo.style.opacity='0.7'；
logo.style.height='300px'；
logo.style.width='400px'；
logo.style.transition='0.7s'；
}
函数resizeImage（）{
var logo=document.getElementById（'logonName'）；
logo.style.opacity='1'；
logo.style.height='600px'；
logo.style.width='600px'；
logo.style.transition='0.7s'；
}

img{
高度：300px；
宽度：400px；
}

---

如何调用

resizeImage

和

enlargeImage

呢？如果你只是想让它在悬停时变大/变小，为什么不把它留给css呢？他们被调用：因为这是为了上课。我需要了解什么是可能的，什么是不可能的，就像我说的，我在通过CSS做这件事时也有同样的问题。转换列表不应该列出它适用于哪些属性吗？如何调用

resizeImage

和

enlargeImage

？如果你只是想让它在悬停时变大/变小，为什么不把它交给css呢？他们被称为：因为这是为了上课。我需要理解什么是可能的，什么是不可能的，就像我说的，我在通过CSS做这件事时也遇到了同样的问题。转换列表不应该列出它应用于哪些属性吗？根据你说的，我最后使用了：`#ealogo{padding top:7%；width:900px；height:auto；transition:0.7s；}#ealogo:hover{opacity:0.7；transform:scale（0.85）}效果不错！谢谢：）@Matt没问题，很乐意帮忙：）根据你所说的，我最终使用了：`#ealogo{填充顶部：7%；宽度：900px；高度：自动；过渡：0.7s；}#ealogo:hover{opacity:0.7；transform:scale（0.85）}很好！谢谢：）@Matt没问题，很乐意帮助：）不幸的是，设置高度值并不能阻止突然性。不幸的是，设置高度值并不能阻止突然性。