Question

我正在为我的在线简历添加一些动画。每个作业都在一个div中，并具有相应的日期范围div。我希望每个作业div和日期范围div从0变为1不透明度并一起向上移动

这是我的功能：

$(".job-box, .job-dates").each(function(i){
    var initialDelay = 500 * i;
    $(this).delay(initialDelay).animate({
        opacity:1,
        marginTop:"0px"
    },500);
});

但是这会激活每个div ，而不是将每个作业框div和日期范围div 组合在一起。

我确实尝试将每个div组包装在另一个div 中，然后设置动画，但它也不起作用。也许是因为包装div保持在0的高度？我无法弄清楚为什么包装器不是其内容的高度......

小提琴在这里：https://jsfiddle.net/kobraklean/m41xwck3/

任何想法？：）

Answer 1

修复此行为的一种简单方法是仅更改每个偶数/奇数div的间隔。我像这样调整了你的代码，它可以正常工作，我怀疑你会想要：

var i=0;
$(".job-box, .job-dates").each(function(i){
    var initialDelay = 500 * Math.floor(i/2);
    $(this).delay(initialDelay).animate({
        opacity:1,
        marginTop:"0px"
    },500);
});

更新了jsfiddle

Answer 2

由于您要为相关元素组设置动画，您应该将元素分组到另一个元素中并为其他元素设置动画，或者，在组中选择一个元素，然后从该元素中选择另一个元素并将它们一起动画化。 / p>

前者会更简单，但会修改你的dom。以下是后者的一个例子：

＆＃13;

    $(".job-box").each(function(i){
        var initialDelay = 100 * i;
    	$(this)
          .next() // selects the next div, which is a .job-dates div
          .addBack() // appends the previous collection ($(this)) to this collection
          .delay(initialDelay).animate({
    	    opacity:1,
    		marginTop:"0px"
    	},350);
    });

＆＃13;

/* CSS Document */

.job-box {
  background-color: #b21d23;
  color: #ffffff;
  padding: 15px 25px;
  margin: 0px;
  position: relative;
  width: 41.667%;
  font-family: 'Arial', sans-serif;
}

.job-box-left,
.job-dates-left {
  float: left;
}

.job-marker-left,
.job-marker-right {
  width: 0;
  height: 0;
  position: absolute;
  top: 0px;
}

.job-marker-left {
  right: -10px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid #b21d23;
}

.job-marker-right {
  left: -10px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 25px solid #b21d23;
}

.job-box h2 {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: inline-block;
  top: 0%;
  margin-top: 12px;
  margin-bottom: 1px;
}

.job-box h3 {
  font-style: italic;
  font-size: 12px;
  margin-top: 5px;
  margin-bottom: 10px;
  letter-spacing: 0.25px;
}

.job-box p {
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.25px;
}

.job-dates-left p,
.job-dates-right p {
  font-family: 'Arial', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  color: #1f1f1f;
  text-align: center;
  line-height: 27px;
}

.job-dates {
  width: 16.667%;
}

.job-dates-right,
.job-box-right {
  float: right;
}

.job-box-right {
  clear: left;
}

.job-box-left {
  clear: right;
}

.job-box,
.job-dates {
  opacity: 0;
  margin-top: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="job-box job-box-left">
  <div class="job-marker-left"></div>
  <h2>Job Title</h2>
  <h3>Company Name</h3>
  <p>Job Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur odio eget justo maximus, a fermentum ipsum tincidunt. Mauris id urna luctus, elementum purus ac, egestas nisl. Pellentesque laoreet felis ac blandit semper. Praesent
    volutpat fermentum aliquam.</p>
</div>
<div class="job-dates job-dates-left">
  <p>Aug '14 - Apr '16</p>
</div>

<div class="job-box job-box-right">
  <div class="job-marker-right"></div>
  <h2>Job Title</h2>
  <h3>Company Name</h3>
  <p>Job Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur odio eget justo maximus, a fermentum ipsum tincidunt. Mauris id urna luctus, elementum purus ac, egestas nisl. Pellentesque laoreet felis ac blandit semper. Praesent
    volutpat fermentum aliquam.</p>
</div>
<div class="job-dates job-dates-right">
  <p>Feb '12 - May '14</p>
</div>

<div class="job-box job-box-left">
  <div class="job-marker-left"></div>
  <h2>Job Title</h2>
  <h3>Company Name</h3>
  <p>Job Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur odio eget justo maximus, a fermentum ipsum tincidunt. Mauris id urna luctus, elementum purus ac, egestas nisl. Pellentesque laoreet felis ac blandit semper. Praesent
    volutpat fermentum aliquam.</p>
</div>
<div class="job-dates job-dates-left">
  <p>Feb '12 - May '14</p>
</div>

<div class="job-box job-box-right">
  <div class="job-marker-right"></div>
  <h2>Job Title</h2>
  <h3>Company Name</h3>
  <p>Job Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur odio eget justo maximus, a fermentum ipsum tincidunt. Mauris id urna luctus, elementum purus ac, egestas nisl. Pellentesque laoreet felis ac blandit semper. Praesent
    volutpat fermentum aliquam.</p>
</div>
<div class="job-dates job-dates-right">
  <p>Jun '12 - Aug '12</p>
</div>

＆＃13;

https://jsfiddle.net/m41xwck3/10/

jQuery每个函数用于一组元素（同时为多个选择器设置动画）

2 个答案: