javascript - jquery 幻灯片动画无法正常工作

Question

我在我的元素中使用 AngularJS 和 JQuery。

我有一个登录页面，其中包含导航栏、 Logo 和一个简单的登录表单。我正在使用 AngularJS 路由来浏览页面。

我正在尝试使用 JQuery animate 在页面加载时制作一些动画。

我正在使用 JQuery slideDown 函数使 Logo 从顶部慢慢淡入淡出，并使登录卡淡入淡出。

我包含了所有必要的库(jquery、jquery animate 在我的主 html 页面中)

这是我的 Jquery 代码:

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

问题是当我加载登录页面时(通过在地址栏中输入地址或通过刷新页面)我没有看到动画， Logo 只是在一秒钟后弹出。

但是，当我使用导航栏并单击标志链接(应该将我带到登录页面)时，我看到 Logo 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，它正在运行。我在 plunker 中使用的图像实际上比我的 Logo 大。这是plunker链接:https://plnkr.co/edit/VQWCMvDpttwlYEwRUqwM?p=preview

EDIT3: 对不起，我忘了保存 plunker。现在，plunker 链接正在运行。

你可以看到我在我的页面上得到的完全相同的行为，第一次加载页面时没有动画，标志只是弹出。下次就好了。

Answer 1

As per my understanding you want to chain your events like you want to slide down #logo and then want to fadein #login-card. You can do like below:

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

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

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

您也可以通过点击链接来更改它。