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

我在我的項目中使用AngularJS和JQuery。jquery幻燈片動畫無法正常工作

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

我想使用JQuery動畫製作一些動畫時，頁面加載。

我正在使用jQuery slideDown函數使徽標在窗體頂部緩慢淡入淡出，同時也淡入登錄卡的功能。

我包括所有必要的庫（jQuery的，在我的主HTML頁面jQuery的動畫）

這裏是我的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以淡入一切工作正常。

EDIT2：我試着用幾乎幾乎完全相同的代碼創建一個plunker，它正在工作。我在掠奪者身上使用的圖像實際上比我的標誌大。這裏是plunker鏈接：https://plnkr.co/edit/VQWCMvDpttwlYEwRUqwM?p=preview

EDIT3：我忘了保存plunker，對不起。現在，蹦極鏈接正在炒作。

您可以看到我在頁面上看到的完全相同的行爲，第一次加載頁面時沒有動畫，只彈出了徽標。下次沒關係。

來源

2017-05-29 user3362334

你剛剛運氣不好 –

這是什麼意思？而且，爲什麼downvote？ – user3362334

我認爲你的運氣不好，因爲你的問題無法複製 - 就像它目前的狀況。 –

根據我的理解，您希望鏈接您想要的事件向下滑動#logo，然後想淡出＃登錄卡。你可以不喜歡如下：

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

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

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

你也可以通過點擊鏈接進行更改。

來源

2017-05-29 12:14:09 brijrajsinh

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

回答

相關問題