jquery幻灯片动画无法正常工作答案

【问题标题】：jquery slide animation not working properlyjquery幻灯片动画无法正常工作
【发布时间】：2017-05-29 10:31:40
【问题描述】：

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

我有一个登录页面，其中包含导航栏、徽标和一个简单的登录表单。我正在使用 AngularJS-route 来导航页面。

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

我正在使用jQuery的slideDown函数来使logo从顶部慢慢淡入，同时也为登录卡提供淡入功能。

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

这是我的 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，并且它正在工作。我在 plunker 中使用的图像实际上比我的徽标大。这是 plunker 链接：https://plnkr.co/edit/VQWCMvDpttwlYEwRUqwM?p=preview

EDIT3：我忘了保存 plunker，抱歉。现在，plunker 链接正在运行。

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

【问题讨论】：

你运气不好
这是什么意思？而且，为什么要投反对票？
我认为您不走运，因为您的问题无法复制 - 就目前而言。
如果使用 $(document).load(function(){ 而不是 ready 可能会工作。让我知道，干杯。
@RokoC.Buljan Sould 我粘贴更多代码？我还有两个可能相关的页面：我的主 index.html 使用 ng-view 加载视图和包含 angular-route 配置的 js 文件。

标签： javascript jquery html css angularjs

【解决方案1】：

据我了解，您希望按照自己的意愿链接您的事件向下滑动#logo，然后想要淡入#login-card。你可以这样做下面：

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

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

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

您也可以在点击链接时更改此设置。

【讨论】：