查看此链接中的分享按钮 http://allure.elated-themes.com/taking-over-street-fashion-2/
当鼠标悬停在共享按钮上时,我需要一个jquery代码,共享链接逐个淡出,当鼠标离开淡入时将停止,可见链接将逐个淡出。
这是我的HTML代码。
<div class="item-share">
<span>Share</span>
<ul class="none gltr-med">
<li><a href="#"><i class="demo-icon icon-facebook"></i></a></li>
<li><a href="#"><i class="demo-icon icon-twitter"></i></a></li>
<li><a href="#"><i class="demo-icon icon-gplus"></i></a></li>
</ul>
</div>
答案 0 :(得分:0)
这与您的HTML代码不相似,但它教您如何构建fadeIn。如果要在开始时使图像不可见,请使用CSS将其不透明度设置为0.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var share = document.getElementById("share");
share.onmouseover = function () {
$("#facebook").fadeTo(200,1,function () {
$("#twitter").fadeTo(200,1,function () { $("#gplus").fadeTo(200,1);
});
});
}
}
</script>
<style type="text/css">
.button {
opacity: 0;
width:100px;
height: 40px;
background-color: green;
}
</style>
</head>
<body>
<div id="share" style="width:100px;height:50px;background-color:red">Hover Me</div>
<div class="button" id="facebook">Facebook</div>
<div class="button" id="twitter">Twitter</div>
<div class="button" id="gplus">Gplus</div>
</body>
</html>