jQuery幻燈片動畫無法正常工作

Question

我在我的項目中使用AngularJS和JQuery。

我有一個登錄頁面，其中包含導航欄，徽標和簡單的登錄表單。 我正在使用AngularJS-route導航低谷頁面。

我正在嘗試使用JQuery動畫制作頁面加載時的某些動畫。

我正在使用JQuery slideDown函數使徽標從頂部逐漸淡入淡出，並為登錄卡逐漸淡入淡出。

我包括了所有必要的庫（在我的主要html頁面中添加了jQuery，jani動畫）

這是我的Jquery代碼：

<script type="text/javascript">
    $(document).ready(function(){
        $('#logo').slideDown(1000);
        $("#login-card").fadeIn(1000);       
    });
</script>

問題是當我加載登錄頁面時（通過在地址欄中鍵入地址或刷新頁面），我看不到動畫，徽標僅在一秒鍾后彈出。

但是，當我使用導航欄並單擊符號鏈接（應該將我帶到登錄頁面）時，我看到徽標slideDown動畫很好。

這是我的整個login.html：

 <script> $(document).ready(function(){ $('#logo').slideDown(1000); $("#login-card").fadeIn(1000); }); </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-12 menu" ng-controller="modeController" ng-show="$root.signingMode != 'api'"> <ul class="navigation-bar"> <li class="nav-bar-item" ng-class="{'active': mode === '/sign'}" ng-click="changeMode('/sign')"><a href="">Sign</a></li> <li class="nav-bar-item" ng-class="{'active': mode === '/verify'}" ng-click="changeMode('/verify')"><a href="">Verify</a></li> </ul> </div> </div> <div class="row"> <div class="col-xs-12"> <!-- <img class="logo-img" src="images/logo.png"> --> <div class="logo" id="logo" style="display: none"> <img class="logo-img" src="http://placehold.it/100x100/0bf?text=Logo"> </div> </div> </div> <div class="row"> <div class="login-card" id="login-card" style="display: none"> <div class="col-xs-12"> <h1>Log-in</h1><br> <form> <input type="text" name="username" placeholder="Username" ng-model="username"> <input type="password" name="password" placeholder="Password" ng-model="password"> <input type="submit" name="login" class="login login-submit" value="login" ng-click="login()"> <span id="login-error-msg" class="login-error" ng-show="displayError">*Wrong Username/Password</span> <!-- <span id="login-error-msg" class="login-error" ng-style="errorMsg">*Wrong Username/Password</span> --> <!-- <button id="opener">Open Dialog</button> --> </form> </div> </div> <!-- <div class="login-help"> <a href="#">Register</a> • <a href="#">Forgot Password</a> </div> --> </div> </div> 

編輯：如果我將slideDown更改為fadeIn，一切正常。

EDIT2：我嘗試用幾乎完全相同的代碼創建一個插件。 我在plunker中使用的圖像實際上比我的徽標大。 這是插件的鏈接： https ://plnkr.co/edit/VQWCMvDpttwlYEwRUqwM ? p = preview

EDIT3：對不起，我忘了保存活塞。 現在，punker鏈接正在運行。

您會看到我在頁面上得到的完全相同的行為，第一次加載頁面時沒有動畫，只是彈出徽標。 下次還可以。

Answer 1

根據我的理解，您希望將事件鏈接起來，就像您想要向下滑動#logo，然后逐漸淡入＃login-card。 您可以執行以下操作：

================================================== ======================

$('#logo').slideDown(1000, function(){$('#login-card').fadeIn(1000);});

您可以在Plunker上看到工作示例： https ://plnkr.co/edit/Vqy645WChwcQmdJtSQWF ? p = preview

您也可以點擊鏈接來更改此設置。