Question

我只是想知道如何一个接一个地显示div，而且一次又一个。

所以我有这个代码，当你将鼠标悬停在另一个div上时，会显示某个div。

HTML

<section class="map">

   <img src="img/map.jpg">

   <div id="vietnam">
    <div id="vietnam-1">Vietnam</div>
   </div>

   <div id="cambodia">
       <div id="cambodia-1">Cambodia</div>
   </div>

   <div id="singapore">
       <div id="singapore-1">Singapore</div>
   </div>
</section>

CSS

.map {
   background: #fff;
   font-size: 1em;
   padding: 0;
   margin:0;
   line-height: 2em;
   position: relative;
   text-align: center;
   z-index: 1
}

#vietnam, #cambodia, #singapore {
   background-image: url(img/pin.png);
   background-size: 100%;
   background-repeat: no-repeat;
   display: inline-block;
   width: 15px;
   height: 22px;
   position: absolute;
}

#vietnam:hover, #cambodia:hover, #singapore:hover {
   background-image: url(img/bluepin.png);
}

#vietnam {
  top: 43.9%;
  right: 21.8%;
}

#cambodia{
  top: 42.7%;
  right: 22.7%;
}

#singapore {
  top: 51%;
  right:  22.6%
}

#vietnam-1, #cambodia-1, #singapore-1 {
  display: none;
  background:#007eff;
  overflow: hidden;
  z-index: 100;
}

#vietnam:hover #vietnam-1, #cambodia:hover #cambodia-1, #singapore:hover #singapore-1 {
  display: block;
  top: 2em;
  position: absolute;   
  right: -4em;
}

现在，我想要发生的事情是，悬停时出现的div将一个接一个地显示，一次显示一个。就像越南出现的那样，然后在几秒之后，它会隐藏消失，柬埔寨将出现，然后再过几秒钟，它就会消失，新加坡这个词就会出现。

我如何实现这一目标？谢谢！

Answer 1

看看

.animate() | jQuery API Documentation

你可以做一个函数来递归调用（我没有测试这段代码）：

animateDivs = function(divIdArray, position) {
  if(position == null) {
    position = 0;
  }
  var divId = divIdArray[position++];
  $( "#" + divId).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      animateDivs(divIdArray, position);
    }
  });
};

然后调用函数：

$(document).ready(function(){
  animateDivs(["vietnam", "cambodia", "singapore"]);
});

（我没有测试这段代码！）自己改进;）

一个接一个地显示div，一次显示一个

1 个答案: