Javascript 替代 :hover; using loops for every div child

Question

我已经使用下面的代码(或类似的代码)很长一段时间来显示给定帖子的信息:

HTML:

<div class="main">
<div class="info">
    <div>Words</div>
    <div>Words</div>
     <div>Words</div>
     <div>Words</div>
     <div>Words</div>
</div>

CSS:

.main {
    position:relative;
    background-color:#aaa;
    margin:150px auto 0 auto;
    width:50%;
    height:300px;
}

.info {
    background-color:#ccc;
    position:absolute;
    width:30%;
    top:0;
    left:100%;
    height:100%;
}
.info div {
     position:relative;
     right:100%;
    opacity:0;
    margin:10px 7px 20px 7px;
    transition:all .5s ease-in-out;
}
.main:hover .info div:nth-child(1){
    transition:all .5s ease-in-out;
    right:0;
    opacity:1;
}
.main:hover .info div:nth-child(2){
    transition:all .5s ease-in-out .1s;
    right:0;
    opacity:1;
}
.main:hover .info div:nth-child(3){
    transition:all .5s ease-in-out .2s;
    right:0;
    opacity:1;
}
.main:hover .info div:nth-child(4){
    transition:all .5s ease-in-out .3s;
    right:0;
    opacity:1;
}
.main:hover .info div:nth-child(n + 4){
    transition:all .5s ease-in-out .4s;
    right:0;
    opacity:1;
}

我正在尝试找到一个解决方案，无论信息 div 中有多少个 div，它都可以工作；例如，如果有 50 个 div，我希望每个 div 比最后一个晚 0.1s 出现。在给出的示例中，.info 中有一定数量的 div，但在我希望将其应用到的情况下，会有未知数量的 div - 可能是 50，也可能没有。

因此，如果可能的话，我希望有一个 Javascript 解决方案可以循环遍历不同数量的 div，从而替换我当前的 CSS 转换代码。

Answer 1

试试这支笔:http://codepen.io/Leth0_/pen/lhwfE

$(".main").mouseover(function(){
  var x = 200;
  $(".info").children().each(function(){    
    $(this).delay(x).fadeIn(x).animate({"right":"0%"},"slow").css({opacity:1});    
  x = x + 200;
  });
});
$(".main").mouseout(function(){
  var x = 200;
  $(".info").children().each(function(){    
    $(this).delay(x).animate({"right":"100%"},"slow").fadeOut(x+200)    
  x = x + 200;
  });
});

试试这支笔，我相信它能满足您的需求。多次进出 div 时效果不佳，但如果可以的话我会修复它。我会在有空的时候进行编辑。