我有4个元素,我试图动画,但不是每个元素动画上所有元素一次动画。我甚至尝试对动画进行延迟,但仍然无效。
(function($){
var options_position = $('#options').offset().top;
var options_completed = false;
var options_delay = 1000;
//secondary options fire event to ascend pictures
$(window).on('scroll', function(){
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = options_position;
if((y_scroll_pos > scroll_pos_test) && !options_completed) {
options_completed = true;
$('#options-secondary .option').each(function(){
$(this).animate({
top: '-=160'
},options_delay,function(){}).delay( 800 );
//window.setTimeout(function(){}, 2000);
});
options_delay = options_delay + 600;
console.log(options_delay);
console.log(options_completed);
}
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="options">
<section id="options-secondary">
<div class="container">
<div class="row">
<div class="col-6 col-md-3">
<div class="copy align-middle option" id="plans">
<i class="fa fa-balance-scale rotate-360-hover" aria-hidden="true"></i>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="copy align-middle option" id="broker">
<i class="fa fa-user-circle-o rotate-360-hover" aria-hidden="true"></i>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="copy align-middle option">
<i class="fa fa-files-o rotate-360-hover" aria-hidden="true"></i>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="copy align-middle option">
<i class="fa fa-shopping-basket rotate-360-hover" aria-hidden="true"></i>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
</div>
</div>
</div>
</div>
</section>
</div>
不确定如何让每个元素一个接一个地动画,而不是一次完成。
答案 0 :(得分:0)
您可以创建一个函数来一次调用一个
(function($){
var options_position = $('#options').offset().top;
var options_completed = false;
var options_delay = 1000;
//secondary options fire event to ascend pictures
$(window).on('scroll', function(){
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = options_position;
if((y_scroll_pos > scroll_pos_test) && !options_completed) {
options_completed = true;
oneByOne(0);
function oneByOne(i) {
$("#options-secondary .option")
.eq(i)
.animate(
{
top: '-=160px'
},
function() {
if (i < 4) {
oneByOne(i + 1);
}
}
);
}
options_delay = options_delay + 600;
console.log(options_delay);
console.log(options_completed);
}
});
})(jQuery);
&#13;
.option {
position:relative;
top:0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="options">
<section id="options-secondary">
<div class="container">
<div class="row">
<div class="col-6 col-md-3">
<div class="copy align-middle option" id="plans">
<i class="fa fa-balance-scale rotate-360-hover" aria-hidden="true"></i>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="copy align-middle option" id="broker">
<i class="fa fa-user-circle-o rotate-360-hover" aria-hidden="true"></i>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="copy align-middle option">
<i class="fa fa-files-o rotate-360-hover" aria-hidden="true"></i>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
</div>
</div>
<div class="col-6 col-md-3">
<div class="copy align-middle option">
<i class="fa fa-shopping-basket rotate-360-hover" aria-hidden="true"></i>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut nunc urna.</p>
</div>
</div>
</div>
</div>
</section>
</div>
&#13;