使用Java腳本寫在這裏的某個功能

Question

http://jsfiddle.net/cjLm77ek/

在這個例子中，我要的東西添加到Java腳本代碼，這樣，當我再次重新點擊翻頁按鈕，它翻轉回原來的形成。 我該怎麼做？我應該添加到Java腳本代碼中？

$(document).ready(function() { 
    $("#flip_content").click(function() { 
     $("#f1_card").css("transform", "rotateX(180deg)"); 
     $("#f1_card").css("box-shadow", "-5px 5px 5px #aaa"); 
    }); 
}); 

Answer 1

最簡單的一種是切換類：

$(document).ready(function() { 
 

 
    $("#flip_content").click(function() { 
 
     $("#f1_card").toggleClass('flip');   
 
    }); 
 

 
});

#f1_container { 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 450px; 
 
    height: 281px; 
 
    z-index: 1; 
 
} 
 
#f1_container { 
 
    perspective: 1000; 
 
} 
 
#f1_card { 
 
    width: 100%; 
 
    height: 100%; 
 
    transform-style: preserve-3d; 
 
    transition: all 1.0s linear; 
 
} 
 

 
/* disable hover change 
 
#f1_container:hover #f1_card { 
 
    transform: rotateX(180deg); 
 
    box-shadow: -5px 5px 5px #aaa; 
 
} 
 
*/ 
 

 
.face { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    backface-visibility: hidden; 
 
} 
 
.face.back { 
 
    display: block; 
 
    transform: rotateX(180deg); 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    color: white; 
 
    text-align: center; 
 
    background-color: #aaa; 
 
} 
 

 
.flip { 
 
    transform: rotateX(180deg); 
 
    box-shadow: -5px 5px 5px #aaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="f1_container"> 
 
    <div id="f1_card" class="shadow"> 
 
     <div class="front face">lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br />lets see if anything happen 
 
      <br /> 
 
     </div> 
 
     <div class="back face center"> 
 
      <p>This is nice for exposing more information about an image.</p> 
 
      <p>Any content can go here.</p> 
 
     </div> 
 
    </div> 
 
</div> 
 
<button class="btn btn-primary" id="flip_content">Flip</button>

Answer 2

我認爲你是使用JavaScript，你應該只使用CSS過渡和JavaScript來觸發動畫。

現在所有的javascript都負責切換卡片元素上的類，而瀏覽器處理其餘的內容。

$(function() { 
 
    $("#flip_content").click(function() { 
 
    $("#f1_card").toggleClass('rotated') 
 
    }) 
 
})

#flip_content { 
 
    height: 200px; 
 
    width: 200px; 
 
    perspective: 1200px; 
 
    perspective-origin: 50% 50%; 
 
} 
 
#f1_card { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: red; 
 
    transition: 1s all; 
 
} 
 
#f1_card.rotated { 
 
    transform: rotateX(180deg); 
 
    box-shadow: -5px 5px 5px #aaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="flip_content"> 
 
    <div id="f1_card"></div> 
 
</div>