Question

我有一个由4个框组成的网格，当我在其周围徘徊时，我想对使用jquery进行淡入淡出效果。目前，只有2个盒子具有动画效果。如何使其他2个框也具有动画效果。请在下面查看我的jquery代码和HTML的代码段。

  <div class="col-6">

                <div class="row">
                    <div class="card-group">

                        <div id="xxx" style="background-color: #7a3f24;" class="card text-white">
                            <img  id="xx" class="dontdisplay card-img" src="assets/images/instagram_homepage.jpg" alt="Card image">
                             <div class="card-img-overlay">
                                <p style="padding-top:100px;padding-bottom:0px;" class="card-text text-center">
                                    <ion-icon size="large" name="logo-facebook"></ion-icon>
                                </p>
                                <h2 style="font-family: 'Miller Text Reg', Times, Georgia, serif;" class="text-center card-title">
                                    Follow for news
                                    <br> and events
                                </h2>

                            </div> 



                        </div>

                        <div id="linkedInBox" style="background-color: #e9c9a5;" class="card text-white">
                            <img  id="li" class="dontdisplay card-img" src="assets/images/instagram_homepage.jpg" alt="Card image">
                            <div class="card-img-overlay">
                                <p style="padding-top:100px;padding-bottom:0px;" class="card-text text-center">
                                    <ion-icon size="large" name="logo-linkedin"></ion-icon>
                                </p>
                                <h2 style="font-family: 'Miller Text Reg', Times, Georgia, serif;" class="text-center card-title">
                                    Follow for career opportunities
                                </h2>

                            </div>
                        </div>
                    </div>

                    <div class="w-100 d-none d-md-block"></div>



                    <div class="card-group">

                        <div id="twitterBox" style="background-color: #23374a;" class="card bg-dark text-white">
                            <img  id="tw" class="dontdisplay card-img" src="assets/images/instagram_homepage.jpg" alt="Card image">
                            <div class="card-img-overlay">
                                <p style="padding-top:100px;padding-bottom:0px;" class="card-text text-center">
                                    <ion-icon size="large" name="logo-twitter"></ion-icon>
                                </p>
                                <h2 style="font-family: 'Miller Text Reg', Times, Georgia, serif;" class="text-center card-title">
                                    Follow for news
                                    <br> and conversations
                                </h2>

                            </div>
                        </div>

                        <div id="instagramBox" style="background-color: #267d69;" class="card bg-dark text-white">
                            <img id="in" class="dontdisplay card-img" src="assets/images/instagram_homepage.jpg" alt="Card image">
                            <div class="card-img-overlay">
                                <p style="padding-top:100px;padding-bottom:0px;" class="card-text text-center">
                                    <ion-icon size="large" name="logo-instagram"></ion-icon>
                                </p>
                                <h2 style="font-family: 'Miller Text Reg', Times, Georgia, serif;" class="text-center card-title">
                                    Follow the studio for updates
                                </h2>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

上面的代码是我的HTML

 <script>
        $('#linkedInBox').hover(
                  function () 
                  {
                      $('#li').fadeIn('slow');
                  }, function () 
                  {
                      $('#li').fadeOut('slow');
                  }
              );
      $('#twitterBox').hover(
          function () 
          {
              $('#tw').fadeIn('slow');
          }, function () 
          {
              $('#tw').fadeOut('slow');
          }
      );
      $('#xxx').hover(
                  function () 
                  {
                      $('#xx').fadeIn('slow');
                  }, function () 
                  {
                      $('#xx').fadeOut('slow');
                  }
              );
    $('#instagramBox').hover(
        function () 
        {
            $('#in').fadeIn('slow');
        }, function () 
        {
            $('#in').fadeOut('slow');
        }
    );
  </script>

上面的代码是我的Jquery代码。 LinkedIn和Twitter Boxes会按预期进行动画处理，而其他情况则没有。我创建了一个CSS类

<style>

                  .dontdisplay {
                        display: none;
                    }

                </style>

Answer 1

该id在facebookBox元素中不带有大B。

#faceBookBox至#facebookBox

  $('#facebookBox').hover( function () {
    $('#fb').fadeIn('slow');
  }, function () {
    $('#fb').fadeOut('slow');
  });

Answer 2

#faceBookBox上的ID错误。应该是#facebookBox。

$('#faceBookBox').hover(应该是$('#facebookBox').hover(

此外，您还要在HTML中关闭一个额外的</div>元素。

编辑：添加以下css以隐藏的图像开始，并且仅在悬停时显示第一次。还更新了小提琴

img{
  display:none;
}

选中this working fiddle。

对4个div框进行动画处理只能使2动画而不是4

2 个答案: