如何使用jQuery和CSS创建图像悬停淡入淡出效果？

我试图通过淡入淡出两个图像来创建徽标悬停效果。我尝试过使用CSS，但结果看起来并不像预期的那么好（尽管它完全适用于其他目的），所以我决定尝试jQuery。（忽略标签，他们是博主）。如何使用jQuery和CSS创建图像悬停淡入淡出效果？

这是我的第一个方法（在淡入淡出时看起来不错，但'display：none'在第一次悬停时不能正确显示'display：block'，因此图像从初始位置移动然后它可以追溯到那个位置徘徊时，它完美的作品。

<script type='text/javascript'> 
//<![CDATA[ 
$(function() { 
$('#MyLogoContainer').hover(function() { 
    $('#MyLogoHover').fadeIn('slow'); 
    $('#MyLogo').fadeOut('slow'); 
}, function() { 
    $('#MyLogo').fadeIn('slow'); 
    $('#MyLogoHover').fadeOut('slow'); 
}); 
}); 
//]]> 
</script>

我的第二个办法解决的CSS位置问题，但动画看起来并不流体都和两个图像在某些时候消失几乎完全，这看起来不太好，也没有用我的拳头发生。

<script type='text/javascript'> 
//<![CDATA[ 
$(function() { 
$('#MyLogoContainer').hover(function() { 
    $('#MyLogoHover').fadeIn('slow').css('display','block'); 
    $('#MyLogo').fadeOut('slow').css('display','none'); 
}, function() { 
    $('#MyLogo').fadeIn('slow').css('display','block'); 
    $('#MyLogoHover').fadeOut('slow').css('display','none'); 
}); 
}); 
//]]> 
</script>

问题出现在CSS中。不知何故，我必须找到一种方法，以便显示属性在定位这两个SVG图像中不发挥关键作用，所以我可以使用第一个jQuery代码，而不会对我的SVG图像的位置发生任何更改。

#MyLogoContainer { 
    width: 100%; 
    left: 50%; 
    margin: 0 0 0 -350px; 
    position: absolute; 
} 
#MyLogo { 
    width: 700px; 
    display: block; 
    position: absolute; 
} 

#MyLogoHover { 
    width: 700px; 
    display: none; 
    position: absolute; 
}

来源

2016-05-02 Adriana Cota

，jQuery将让这个容易得多。否则，您可以通过更改要淡入的元素的类来使用css转换。我们需要看到更多的代码才能够提供帮助。 HTML的外观如何？ –

要将一幅图像淡入另一幅图像，两幅图像必须在淡入淡出的同时显示。创建两个图像，一个在另一个之上。当顶部的一个消失时，将CSS'opacity'设置为0，使用CSS'transition'。 – Aloso

https://jsfiddle.net/ahmadabdul3/mvw9xm89/1/ < - 一对夫妇的例子 –

从你描述你甚至不需要JS做到这一点：

.container { 
 
    position: relative; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
    overflow: hidden; 
 
    background: #ccc; 
 
    height: 150px; 
 
    width: 150px; 
 
} 
 

 
.container:hover .logo--static-state { 
 
    opacity: 0; 
 
} 
 

 
.container:hover .logo--hover-state { 
 
    opacity: 1; 
 
} 
 

 
.logo { 
 
    position: absolute; 
 
    transition: opacity 300ms ease-in-out; 
 
} 
 

 
.logo--static-state { 
 
    z-index: 9999; 
 
} 
 

 
.logo--hover-state { 
 
    opacity: 0; 
 
    z-index: 9998; 
 
}

<div class="container"> 
 
    <img class="logo logo--static-state" src="http://placehold.it/150x150?text=Static" height=150 width=150> 
 
    <img class="logo logo--hover-state" src="http://placehold.it/150x150?text=Hovered" height=150 width=150> 
 
</div>

如果你想要一个JavaScript方式

来源

2016-05-02 19:40:20

它的工作原理，但问题是这两个图像都是透明的SVG，并且在悬停前静态图像下边框可见。有没有办法在悬停图像上设置0不透明度，并将鼠标悬停在静态图像上时将其设置为1（就像减少该图像的不透明度一样，我想我有办法做到这一点，将鼠标悬停在容器上，我试试 –

根据你的评论做出了改变让我知道这是否可行 –

谢谢你的更新我试图做一个徽标悬停效果在更新你的答案之前，我用jQuery试了一下，得到了一个类似的问题。我的CSS代码有问题，因为'display：none';不会变成'display：block';当我淡入第一次悬停图像..如果我添加.css（'显示'，'块'）它只是简单地消失就像你的代码，这看起来不像预期的。我会用我的CSS和jQuery更新我的问题。如果你更新你的答案，我认为你不应该删除你已发布的内容，它肯定会对某人有用。 –

如何使用jQuery和CSS创建图像悬停淡入淡出效果？

回答

相关问题