Question

查看此链接中的分享按钮 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>

Answer 1

这与您的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>

Jquery如何在鼠标离开时一个接一个地淡入淡出并逐渐淡出

1 个答案: