Question

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

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

我试图在页面加载时使用JQuery动画来制作动画。

我使用JQuery slideDown功能使徽标从顶部慢慢淡出，并且还淡入登录卡的功能。

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

这是我的Jquery代码：

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

问题在于，当我加载登录页面时（通过在地址栏中输入地址或刷新页面）我没有看到动画，徽标只会在一秒后弹出。

但是，当我使用导航栏并单击符号链接（应该将我带到登录页面）时，我看到徽标slideDown动画就好了。

这是我的整个login.html：

＆＃13;

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

＆＃13;

<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>

＆＃13;

编辑：如果我将slideDown更改为fadeIn一切正常。

EDIT2：我尝试使用几乎完全相同的代码创建一个plunker，它正在运行。我在plunker中使用的图像实际上比我的徽标大。以下是plunker链接：https://plnkr.co/edit/VQWCMvDpttwlYEwRUqwM?p=preview

EDIT3：对不起，我忘记了保存龙头。现在，plunker链接正在进行中。

你可以看到我在我的页面上获得的完全相同的行为，第一次加载页面时没有动画，徽标就会弹出。下次没事。

Answer 1

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

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

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

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

您也可以点击链接更改此内容。

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

1 个答案: