运行功能，一个功能齐全 - JQuery的动画

Question

我有一个简单的jQuery动画功能上点击运行，我要的是，运行一个函数动画完成后，这是我正在做的，下面的代码：

这是我的代码是怎么做的，在按钮点击时，四个div从下到上出现（默认div在-100％底部位置），每个div都有内容，预期的结果是，在所有四个div之后出现内容加载，这是不是现在正在发生。

UPDATE

这是JSFiddle Example

唯一的要求是，以显示DIV内容一旦所有的四列装载。

$(".menuitem-2").click(function() { 
    $(".wwasection-one").stop(true, true).delay(2000).animate({ 
      bottom: 0 
     }, 3000, 
     function() { 
      $(".wwa-gallery-content").stop(true, true).delay(18000).css("opacity", "0.4"); 
     }); 
    $(".wwasection-two").stop(true, true).delay(4000).animate({ 
      bottom: 0 
     }, 5000, 
     function() { 
      $(".wwa-gallery-content").stop(true, true).delay(22000).css("opacity", "0.4"); 
     }); 
    $(".wwasection-three").stop(true, true).delay(5000).animate({ 
      bottom: 0 
     }, 8000, 
     function() { 
      $(".wwa-gallery-content").stop(true, true).delay(32000).css("opacity", "0.4"); 
     }); 
    $(".wwasection-four").stop(true, true).delay(7000).animate({ 
      bottom: 0 
     }, 10000, 
     function() { 
      $(".wwa-gallery-content").stop(true, true).delay(42000).css("opacity", "0.4"); 
     }); 
}); 

Answer 1

你可以链传递给$.when()在.then()所有.animate()电话后链接到$.when()执行任务.promise()到.animate()电话已返回解决jQuery的诺言。

var winw = $(document).width(); 
 
var winh = $(document).height(); 
 
$(document).ready(function() { 
 
    $(".whoweareWrapper").height(winh); 
 
    var settings = [ 
 
    {delay:2000, duration:3000}, 
 
    {delay:4000, duration:5000}, 
 
    {delay:5000, duration:8000}, 
 
    {delay:7000, duration:10000} 
 
    ]; 
 
    $(".menuitem-2").click(function() { 
 
    $.when.apply($, $.map($("[class~=wwasection]"), function(el, index) { 
 
     return $(el).stop(true, true).delay(settings[index].delay) 
 
       .animate({bottom: 0}, settings[index].duration).promise() 
 
     })) 
 
     .then(function() { 
 
     $(".wwa-gallery-content").css("opacity", "0.4"); 
 
     }) 
 
    }); 
 
});

.whoweareWrapper { 
 
    width: calc(100% - 130px); 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.wwasection { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: -100%; 
 
    height: 100%; 
 
    width: 25%; 
 
    border-right: 1px solid #f00; 
 
    box-sizing: border-box; 
 
} 
 

 
.wwasection-one { 
 
    background-color: #cdcdcd); 
 
    left: 0; 
 
} 
 

 
.wwasection-two { 
 
    background-color: #bdbdbd); 
 
    left: 25%; 
 
} 
 

 
.wwasection-three { 
 
    background-color: #c0c0c0); 
 
    left: 50%; 
 
} 
 

 
.wwasection-four { 
 
    background-color: #b0b0b0); 
 
    left: 75%; 
 
} 
 

 
.wwa-opacity-mask { 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    -webkit-transition: all .5s linear; 
 
    -moz-transition: all .5s linear; 
 
    -ms-transition: all .5s linear; 
 
    -o-transition: all .5s linear; 
 
    transition: all .5s linear; 
 
} 
 

 
.wwa-gallery-content { 
 
    max-width: 400px; 
 
    margin: 0 auto; 
 
    vertical-align: middle; 
 
    top: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    opacity: 0; 
 
    transition: all 0.7s ease-in-out; 
 
} 
 

 
.wwa-gallery-content>h1 { 
 
    color: #fff; 
 
    font-size: 34px; 
 
    font-family: 'Sansita', sans-serif; 
 
    font-weight: 400; 
 
    margin: 0; 
 
} 
 

 
.wwa-gallery-content>p { 
 
    font-size: 16px; 
 
    color: #fff; 
 
    font-family: 'Sansita', sans-serif; 
 
} 
 

 
.wwa-opacity-mask:hover { 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
} 
 

 
.wwa-opacity-mask:hover .wwa-gallery-content { 
 
    opacity: 0.7 !important; 
 
} 
 

 
.wwa-discover-btn { 
 
    float: left; 
 
    width: 100%; 
 
    text-align: center; 
 
    opacity: 0; 
 
} 
 

 
.wwa-discover-btn>a { 
 
    font-size: 20px; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    font-family: 'Sansita', sans-serif; 
 
    text-transform: uppercase; 
 
    padding: 8px 20px; 
 
    display: inline-block; 
 
    border: 2px solid #fff; 
 
} 
 

 
.wwa-discover-btn>a:hover { 
 
    background: #fff; 
 
    color: #333333; 
 
} 
 

 
.wwa-opacity-mask:hover .wwa-gallery-content>.wwa-discover-btn { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gall-wrapper2" class="whoweareWrapper"> 
 
    <a href="#" class="menuitem-2">Show Div</a> 
 
    <!-- Block One --> 
 
    <div class="wwasection wwasection-one"> 
 
    <div class="wwa-opacity-mask"> 
 
     <div class="wwa-gallery-content"> 
 
     <h1>JOURNEY </h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div> 
 
     </div> 
 
     <div class="arrowdown" id="wwa-gallery-detail1"></div> 
 
    </div> 
 
    </div> 
 
    <!-- Block Two --> 
 
    <div class="wwasection wwasection-two"> 
 
    <div class="wwa-opacity-mask"> 
 
     <div class="wwa-gallery-content"> 
 
     <h1>PROJECTS DONE </h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div> 
 
     </div> 
 
     <div class="arrowdown" id="wwa-gallery-detail1"></div> 
 
    </div> 
 
    </div> 
 
    <!-- Block Three --> 
 
    <div class="wwasection wwasection-three"> 
 
    <div class="wwa-opacity-mask"> 
 
     <div class="wwa-gallery-content"> 
 
     <h1>FOUNDER INFO </h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div> 
 
     </div> 
 
     <div class="arrowdown" id="wwa-gallery-detail1"></div> 
 
    </div> 
 
    </div> 
 
    <!-- Block Four --> 
 
    <div class="wwasection wwasection-four"> 
 
    <div class="wwa-opacity-mask"> 
 
     <div class="wwa-gallery-content"> 
 
     <h1>PRESS & ACCREDIATIONS </h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div> 
 
     </div> 
 
     <div class="arrowdown" id="wwa-gallery-detail1"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

每的文档.animate()：

.animate（属性[，持续时间] [，缓和] [，完整]）

在哪里完成是：

complete
类型：Function()
动画完成后调用的函数，每匹配元素调用一次。

所以，你可以定义一个函数，你增加一个计数器，当计数器达到4，那么所有的动画应该完成。

Answer 3

达到last div到top:0即.wwasection-four你可以改变的内容opacity回1，如下，后

\t var winw = $(document).width(); 
 
\t var winh = $(document).height(); 
 
    $(document).ready(function() { 
 
    $(".whoweareWrapper").height(winh); 
 
    $(".menuitem-2").click(function() { 
 
\t \t $(".wwasection-one").stop(true, true).delay(2000).animate({ 
 
\t \t \t \t bottom: 0 
 
\t \t \t },3000 , 
 
\t \t function() { 
 
\t \t \t \t $(".wwa-gallery-content").css("opacity", "0"); 
 
\t \t \t }); 
 
\t \t $(".wwasection-two").stop(true, true).delay(4000).animate({ 
 
\t \t \t \t bottom: 0 
 
\t \t \t },5000, 
 
\t \t \t function() { 
 
\t \t \t \t $(".wwa-gallery-content").css("opacity", "0"); 
 
\t \t \t }); 
 
\t \t $(".wwasection-three").stop(true, true).delay(5000).animate({ 
 
\t \t \t \t bottom: 0 
 
\t \t \t }, 8000, 
 
     function() { 
 
\t \t \t \t $(".wwa-gallery-content").css("opacity", "0"); 
 
\t \t \t }); 
 
\t \t $(".wwasection-four").stop(true, true).delay(7000).animate({ 
 
\t \t \t \t bottom: 0 
 
\t \t \t }, 10000 , 
 
     function() { 
 
\t \t \t \t $(".wwa-gallery-content").css("opacity", "1"); 
 
\t \t \t }); 
 
\t }); 
 
});

.whoweareWrapper { 
 
\t width: calc(100% - 130px); 
 
\t float: left; 
 
\t position: relative; 
 
} 
 
.wwasection { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t bottom: -100%; 
 
\t height: 100%; 
 
\t width: 25%; 
 
    border-right:1px solid #f00; 
 
    box-sizing:border-box; 
 
} 
 
.wwasection-one { 
 
\t background-color: #cdcdcd); 
 
\t left: 0; 
 
} 
 
.wwasection-two { 
 
\t background-color: #bdbdbd); 
 
\t left: 25%; 
 
} 
 
.wwasection-three { 
 
\t background-color: #c0c0c0); 
 
\t left: 50%; 
 
} 
 
.wwasection-four { 
 
\t background-color: #b0b0b0); 
 
\t left: 75%; 
 
} 
 
.wwa-opacity-mask { 
 
\t background-color: rgba(0,0,0,0.6); 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: absolute; 
 
\t -webkit-transition: all .5s linear; 
 
\t -moz-transition: all .5s linear; 
 
\t -ms-transition: all .5s linear; 
 
\t -o-transition: all .5s linear; 
 
\t transition: all .5s linear; 
 
} 
 
.wwa-gallery-content { 
 
\t max-width: 400px; 
 
\t margin: 0 auto; 
 
\t vertical-align: middle; 
 
\t top: 50%; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
\t text-align: center; 
 
\t opacity: 0; 
 
\t transition: all 0.7s ease-in-out; 
 
} 
 
.wwa-gallery-content > h1 { 
 
\t color: #fff; 
 
\t font-size: 34px; 
 
\t font-family: 'Sansita', sans-serif; 
 
\t font-weight: 400; 
 
\t margin: 0; 
 
} 
 
.wwa-gallery-content > p { 
 
\t font-size: 16px; 
 
\t color: #fff; 
 
\t font-family: 'Sansita', sans-serif; 
 
} 
 
.wwa-opacity-mask:hover { 
 
\t background-color: rgba(0,0,0,0.4); 
 
} 
 
.wwa-opacity-mask:hover .wwa-gallery-content { 
 
\t opacity: 0.7 !important; 
 
} 
 
.wwa-discover-btn { 
 
\t float: left; 
 
\t width: 100%; 
 
\t text-align: center; 
 
\t opacity: 0; 
 
} 
 
.wwa-discover-btn > a { 
 
\t font-size: 20px; 
 
\t text-decoration: none; 
 
\t color: #fff; 
 
\t font-family: 'Sansita', sans-serif; 
 
\t text-transform: uppercase; 
 
\t padding: 8px 20px; 
 
\t display: inline-block; 
 
\t border: 2px solid #fff; 
 
} 
 
.wwa-discover-btn > a:hover { 
 
\t background: #fff; 
 
\t color: #333333; 
 
} 
 
.wwa-opacity-mask:hover .wwa-gallery-content > .wwa-discover-btn { 
 
\t opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gall-wrapper2" class="whoweareWrapper"> 
 
<a href="#" class="menuitem-2">Show Div</a> 
 
<!-- Block One --> 
 
    <div class="wwasection wwasection-one"> 
 
    <div class="wwa-opacity-mask"> 
 
     <div class="wwa-gallery-content"> 
 
     <h1>JOURNEY </h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div> 
 
     </div> 
 
     <div class="arrowdown" id="wwa-gallery-detail1"></div> 
 
    </div> 
 
    </div> 
 
    <!-- Block Two --> 
 
    <div class="wwasection wwasection-two"> 
 
    <div class="wwa-opacity-mask"> 
 
     <div class="wwa-gallery-content"> 
 
     <h1>PROJECTS DONE </h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div> 
 
     </div> 
 
     <div class="arrowdown" id="wwa-gallery-detail1"></div> 
 
    </div> 
 
    </div> 
 
    <!-- Block Three --> 
 
    <div class="wwasection wwasection-three"> 
 
    <div class="wwa-opacity-mask"> 
 
     <div class="wwa-gallery-content"> 
 
     <h1>FOUNDER INFO </h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div> 
 
     </div> 
 
     <div class="arrowdown" id="wwa-gallery-detail1"></div> 
 
    </div> 
 
    </div> 
 
    <!-- Block Four --> 
 
    <div class="wwasection wwasection-four"> 
 
    <div class="wwa-opacity-mask"> 
 
     <div class="wwa-gallery-content"> 
 
     <h1>PRESS & ACCREDIATIONS </h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div id="discover1" class="wwa-discover-btn"> <a href="#">Discover</a> </div> 
 
     </div> 
 
     <div class="arrowdown" id="wwa-gallery-detail1"></div> 
 
    </div> 
 
    </div> 
 
</div>