javascript - 实现 Jquery show()？

Question

如何将 JQuery.show() 与我的工作动画相结合，以便我可以显示文本。

我想在这个 working example 上实现与此处相同的效果.但我不想使用“数据”前缀来显示文本，我想使用jquery.show()。我无法理解在何处以及如何为每个按钮放置我的文本并将其显示在 middleBubble 上。

我的示例和这个示例之间的唯一区别是我的 middleBubble 正在切换。

我怎样才能使这项工作有效并在工作动画中实现 jquery show() 库？

我的示例的 HTML:

 <section class='circle-animation'>
    <div class="container-fluid">
      <div class="row">
        <div class="hidden-xs hidden-sm">
          <div class="col-sm-6 col-sm-offset-3 col-sm-pull-1">
            <div id="middlepapir" class="jumbotron">
              <div class="row">

                <img class="papir img-responsive" src="img/circle/11.png" alt="">
                <div class="row">
                  <div class="move1 col-sm-4 col-xs-4 col-md-push-4"> 
                      <a href="#"><img class="position1 round" src="img/circle/off/home-all-icon-off.png"></a>
                  </div>
                </div>
                <div class="row">
                  <div class="move2 col-sm-4 col-xs-4 col-md-push-1">
                      <a href="#"><img class="position2 round" src="img/circle/off/home-cover-icon-off.png"></a>
                  </div>
                </div>
                <div class="row">
                  <div class="move3 col-sm-4 col-xs-4 col-md-push-7">
                      <a href="#"><img class="position3 round" src="img/circle/off/home-design-icon-off.png"></a>
                  </div>
                </div>
                <div class="row">
                  <div class="move4 col-sm-4 col-xs-4">
                      <a href="#"><img class="position4 round" src="img/circle/off/home-diy-icon-off.png"></a>
                  </div>
                </div>
                <div class="row">
                  <div class="move5 col-sm-4 col-xs-4 col-md-push-8">
                      <a href="#"><img class="position5 round" src="img/circle/off/home-marketing-icon-off.png"></a>
                  </div>
                </div>
                <div class="row">
                  <div class="move6 col-sm-4 col-xs-4 col-md-push-1">
                      <a href="#"><img class="position6 round" src="img/circle/off/home-other-icon-off.png"></a>
                  </div>
                </div>
                <div class="row">
                  <div class="move7 col-sm-4 col-xs-4 col-md-push-4">
                      <a href="#"><img class="position7 round" src="img/circle/off/home-special-icon-off.png"></a>
                  </div>
                </div>
                <div class="row">
                  <div class="move8 col-sm-4 col-xs-4 col-md-push-7">
                      <a href="#"><img class="position8 round" src="img/circle/off/home-vip-icon-off.png"></a>
                  </div>
                </div>
              </div>
            </div>   
          </div>  
        </div>  
      </div>    
    </div>
  </section>

HTML 部分的 Jquery:

// jQuery script for are Circle div whit Scroll Reveal Script

$(document).ready(function(){
    /*==========================================
    SCROLL REVEL SCRIPTS
    =====================================================*/
    window.scrollReveal = new scrollReveal();
    /*==========================================
    WRITE  YOUR  SCRIPTS BELOW
    =====================================================*/
    $('.round').click(function(){
       $('.papir').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
       }); 
    });    

});

Answer 1

如果没有 CSS，这将更难检查，但是，您似乎错过了示例使用的布局。他们有一个单独的主要文本区域，称为 id="middleBubble"。这是文本被替换的区域。

他们在这里进行替换:

$("#middleBubble").html("<p><b>" + $(this).data("bubble1") + "</b><br />" + $(this).data("bubble2") + "</p>");

其中“this”是悬停的元素(在本例中为图像)。数据存储在 data-bubble1 和 data-bubble2 属性中。您可以将它存储在那里(每个部分的替换文本)，或者您可以将它存储为键控 JSON 对象并使用图像的 id 来键控要使用的值。我会推荐后者，但要针对每个人。