2017-05-12 96 views
0

我'嘗試以下代碼複製到我的項目:JQuery的動畫不起作用

https://codepen.io/colorlib/pen/rxddKy

<div class="login-page"> 
    <div class="form"> 
    <form class="register-form"> 
     <input type="text" placeholder="name"/> 
     <input type="password" placeholder="password"/> 
     <input type="text" placeholder="email address"/> 
     <button>create</button> 
     <p class="message">Already registered? <a href="#">Sign In</a></p> 
    </form> 
    <form class="login-form"> 
     <input type="text" placeholder="username"/> 
     <input type="password" placeholder="password"/> 
     <button>login</button> 
     <p class="message">Not registered? <a href="#">Create an account</a></p> 
    </form> 
    </div> 
</div> 

現在這是我的代碼:

https://jsfiddle.net/39uho033/

<body> 

     <div class="login-page"> 
      <div class="form"> 
       <form class="register-form"> 
        <input type="text" placeholder="name"/> 
        <input type="password" placeholder="password"/> 
        <input type="text" placeholder="email address"/> 
        <button> 
         create 
        </button> 
        <p class="message"> 
         Already registered? <a href="#">Sign In</a> 
        </p> 
       </form> 
       <form class="login-form"> 
        <input type="text" placeholder="username"/> 
        <input type="password" placeholder="password"/> 
        <button> 
         login 
        </button> 
        <p class="message"> 
         Not registered? <a href="#">Create an account</a> 
        </p> 
       </form> 
      </div> 
     </div> 


     <script> 


     </script> 

    </body> 

但爲什麼這不工作?如果我點擊「創建帳戶」,註冊表單不會顯示(通過動畫功能)。

請訪問整個條件的鏈接!

+2

有你在頭鏈接jQuery的? – DopeAt

+0

你的小提琴也是你的代碼需要參考。 jquery – Komal

+0

是的。我已經添加到了頭: Maximus1809

回答

0

你忘了包括jQuery的外部資源在你的jsfiddle。你的代碼工作正常。後

你的jsfiddle包括

jQuery.min.js

https://jsfiddle.net/39uho033/7/

+0

我以爲同樣的事情。不錯的鏈接修改後的JSFiddle – Sarfaraaz

0

請試試這個..

$('.message a').click(function() { 
 

 
\t \t \t \t $('form').animate({ 
 
\t \t \t \t \t height : "toggle", 
 
\t \t \t \t \t opacity : "toggle" 
 
\t \t \t \t }, "slow"); 
 
\t \t \t });
\t @import url(https://fonts.googleapis.com/css?family=Roboto:300); 
 

 
\t \t .h1 { 
 
\t \t \t font-family: "Roboto", sans-serif; 
 
\t \t \t color: #4CAF50; 
 
\t \t \t text-decoration: none; 
 
\t \t } 
 
\t \t .login-page { 
 
\t \t \t width: 360px; 
 
\t \t \t padding: 8% 0 0; 
 
\t \t \t margin: auto; 
 
\t \t } 
 
\t \t .form { 
 
\t \t \t position: relative; 
 
\t \t \t z-index: 1; 
 
\t \t \t background: #FFFFFF; 
 
\t \t \t max-width: 360px; 
 
\t \t \t margin: 0 auto 100px; 
 
\t \t \t padding: 45px; 
 
\t \t \t text-align: center; 
 
\t \t \t box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
 
\t \t } 
 
\t \t .form input { 
 
\t \t \t font-family: "Roboto", sans-serif; 
 
\t \t \t outline: 0; 
 
\t \t \t background: #f2f2f2; 
 
\t \t \t width: 100%; 
 
\t \t \t border: 0; 
 
\t \t \t margin: 0 0 15px; 
 
\t \t \t padding: 15px; 
 
\t \t \t box-sizing: border-box; 
 
\t \t \t font-size: 14px; 
 
\t \t } 
 
\t \t .form button { 
 
\t \t \t font-family: "Roboto", sans-serif; 
 
\t \t \t text-transform: uppercase; 
 
\t \t \t outline: 0; 
 
\t \t \t background: #4CAF50; 
 
\t \t \t width: 100%; 
 
\t \t \t border: 0; 
 
\t \t \t padding: 15px; 
 
\t \t \t color: #FFFFFF; 
 
\t \t \t font-size: 14px; 
 
\t \t \t -webkit-transition: all 0.3 ease; 
 
\t \t \t transition: all 0.3 ease; 
 
\t \t \t cursor: pointer; 
 
\t \t } 
 
\t \t .form button:hover, .form button:active, .form button:focus { 
 
\t \t \t background: #43A047; 
 
\t \t } 
 
\t \t .form .message { 
 
\t \t \t margin: 15px 0 0; 
 
\t \t \t color: #b3b3b3; 
 
\t \t \t font-size: 12px; 
 
\t \t } 
 
\t \t .form .message a { 
 
\t \t \t color: #4CAF50; 
 
\t \t \t text-decoration: none; 
 
\t \t } 
 
\t \t .form .register-form { 
 
\t \t \t display: none; 
 
\t \t } 
 
\t \t .container { 
 
\t \t \t position: relative; 
 
\t \t \t z-index: 1; 
 
\t \t \t max-width: 300px; 
 
\t \t \t margin: 0 auto; 
 
\t \t } 
 
\t \t .container:before, .container:after { 
 
\t \t \t content: ""; 
 
\t \t \t display: block; 
 
\t \t \t clear: both; 
 
\t \t } 
 
\t \t .container .info { 
 
\t \t \t margin: 50px auto; 
 
\t \t \t text-align: center; 
 
\t \t } 
 
\t \t .container .info h1 { 
 
\t \t \t margin: 0 0 15px; 
 
\t \t \t padding: 0; 
 
\t \t \t font-size: 36px; 
 
\t \t \t font-weight: 300; 
 
\t \t \t color: #1a1a1a; 
 
\t \t } 
 
\t \t .container .info span { 
 
\t \t \t color: #4d4d4d; 
 
\t \t \t font-size: 12px; 
 
\t \t } 
 
\t \t .container .info span a { 
 
\t \t \t color: #000000; 
 
\t \t \t text-decoration: none; 
 
\t \t } 
 
\t \t .container .info span .fa { 
 
\t \t \t color: #EF3B3A; 
 
\t \t } 
 
\t \t body { 
 
\t \t \t background: #3BB9FF; /* fallback for old browsers */ 
 
\t \t \t background: -webkit-linear-gradient(right, #3BB9FF, #3BB9FF); 
 
\t \t \t background: -moz-linear-gradient(right, #3BB9FF, #3BB9FF); 
 
\t \t \t background: -o-linear-gradient(right, #3BB9FF, #3BB9FF); 
 
\t \t \t background: linear-gradient(to left, #3BB9FF, #3BB9FF); 
 
\t \t \t font-family: "Roboto", sans-serif; 
 
\t \t \t -webkit-font-smoothing: antialiased; 
 
\t \t \t -moz-osx-font-smoothing: grayscale; 
 
\t \t }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
\t \t <div class="login-page"> 
 
\t \t \t <div class="form"> 
 
\t \t \t \t <form class="register-form"> 
 
\t \t \t \t \t <input type="text" placeholder="name"/> 
 
\t \t \t \t \t <input type="password" placeholder="password"/> 
 
\t \t \t \t \t <input type="text" placeholder="email address"/> 
 
\t \t \t \t \t <button> 
 
\t \t \t \t \t \t create 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <p class="message"> 
 
\t \t \t \t \t \t Already registered? <a href="#">Sign In</a> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </form> 
 
\t \t \t \t <form class="login-form"> 
 
\t \t \t \t \t <input type="text" placeholder="username"/> 
 
\t \t \t \t \t <input type="password" placeholder="password"/> 
 
\t \t \t \t \t <button> 
 
\t \t \t \t \t \t login 
 
\t \t \t \t \t </button> 
 
\t \t \t \t \t <p class="message"> 
 
\t \t \t \t \t \t Not registered? <a href="#">Create an account</a> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </form> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t 
 
\t \t <script> 
 
\t \t \t \t \t 
 
\t 
 
\t \t </script> 
 

 
\t </body>