Question

我正在尝试向此网页添加动画，以便在页面上滑动登录矩形。所以从564px到100％。我已经能够用纯CSS动画做到这一点，但是，我不希望它在表单中按下提交按钮之前一直播放。有没有办法做到这一点？我的代码如下。

HTML

    <div class="innerRect">
    <br />
    <br />
    <img src="img/logo.png" />
    <br />
    <br />
    <br />
    <form id="logForm" action="" method="post">
        <p style="text-align:left; margin-left:80px;">USERNAME<br>
        <input type="text" name="username" style="width: 400px;">
    <br />
    <br />
        PASSWORD<br>
        <input type="password" name="password" style="width: 400px;">
    <br />
    <br />
        <input type="submit" value="LOG ON" style="float:right; margin-right: 85px;">
    </form>
    </p>

    <div class="settingsHelp">
    <a><img src="img/settings.png" /></a><br>
    <a><img src="img/help.png" /></a>
    </div>

    </div>

CSS

.loginRectangle {
    float: right;
    width:564px;
    height:100%;
    background-image:url(../img/rectangle.png);
    text-align: center;
    font-size: 28px;
}

.innerRect {
    float: right;
    width: 564px;
    height:100%;
}

.settingsHelp {
    position: absolute;
    bottom: 10px;
    right:10px;
    text-align:right;
}

Answer 1

你能不能只用动画添加这个类？

<input type="submit" id="submitButton" />

jQuery

$(function() {
    $("#submitButton").on('click', function(){
         $("#sliderBox").addclass('slide');
    })
}

CSS动画类提交按钮单击

1 个答案: