Javascript 实现Jquery show（）？

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

我想在这里实现与此相同的效果。但我不想使用“数据”前缀来显示文本，我想使用jquery.show（）。我很难理解在哪里以及如何为每个按钮放置文本，并将其显示在屏幕上

我的例子和这个例子的唯一区别是，我的中间气泡正在切换

如何在工作动画中实现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>

---

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

他们在这里进行更换：

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

$（“#middleBubble”）.html（“”+$（this.data）（“bubble1”）+”
“+$（this.data）（“bubble2”）+”
”）；

---

其中“this”是悬停在上面的元素（在本例中是图像）。数据存储在data-bubble1和data-bubble2属性中。您可以将其存储在那里（每个部分的替换文本），也可以将其存储为键控JSON对象，并使用图像的id键控要使用的值。我会推荐后面的，但每个按钮都有自己的。

你需要使用id将每个按钮和文本配对，根据按钮id，你通过选择共同响应id显示文本谢谢，我最终会想出来的，我只是不想使用替换id，我的布局适合一个分区中的所有内容，我使用了引导网格系统来定位按钮。

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