jquery làm thế nào để làm một hiệu ứng lật?

Question

Tôi đang cố gắng bắt chước một hiệu ứng thường thấy trên thiết bị di động nơi bạn có bảng điều khiển và khi bạn nhấp vào nút, nó quay xung quanh và phía bên kia nó có một số thông tin khác.

tôi thấy một số mã mà usses chuyển css và here is an example

js

$('#signup').on('click', function(e) { 
    e.preventDefault(); 
    document.getElementById('side-2').className = 'flip flip-side-1'; 
    document.getElementById('side-1').className = 'flip flip-side-2'; 

}); 

$('#create').on('click', function(e) { 
    e.preventDefault(); 
    document.getElementById('side-2').className = 'flip'; 
    document.getElementById('side-1').className = 'flip'; 

}); 

vấn đề với ví dụ này là nếu tôi chuyển đổi javascript vào jquery nó stopps làm việc:

từ:

document.getElementById('side-2').className = 'flip flip-side-1'; 

to

$('#side-2').addClass('flip flip-side-1'); 

Ngoài ra, tôi cũng không chắc chắn nếu chưa có plugin jquery thực hiện điều này một cách tốt hơn.

Bất kỳ ý tưởng nào?

một số mã khác. html

<div id="side-1" class="flip"> 
    <a id="signup" href="#">sign up</a> 
</div> 
<div id="side-2" class="flip"> 
    <a id="create" href="#">create</a> 
</div> 

css

.flip { 
    backface-visibility:    hidden; 
     -moz-backface-visibility: hidden; 
     -ms-backface-visibility:  hidden; 
     -o-backface-visibility:  hidden; 
     -webkit-backface-visibility: hidden; 
    border: 1px solid black; 
    transform-origin:    50% 50% 0px; 
     -moz-transform-origin: 50% 50% 0px; 
     -ms-transform-origin:  50% 50% 0px; 
     -o-transform-origin:  50% 50% 0px; 
     -webkit-transform-origin: 50% 50% 0px; 
    transition: all 1s; 
     -moz-transition: all 1s; 
     -ms-transition:  all 1s; 
     -o-transition:  all 1s; 
     -webkit-transition: all 1s; 
} 

#side-1 { 
    transform:    rotateY(0deg); 
     -moz-transform: rotateY(0deg); 
     -ms-transform:  rotateY(0deg); 
     -o-transform:  rotateY(0deg); 
     -webkit-transform: rotateY(0deg); 
} 

#side-2 { 
    transform:    rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
     -ms-transform:  rotateY(180deg); 
     -o-transform:  rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
} 

.flip-side-1 {  
    transform:    rotateY(0deg) !important; 
     -moz-transform: rotateY(0deg) !important; 
     -ms-transform:  rotateY(0deg) !important; 
     -o-transform:  rotateY(0deg) !important; 
     -webkit-transform: rotateY(0deg) !important; 
} 

.flip-side-2 { 
    transform:    rotateY(180deg) !important; 
     -moz-transform: rotateY(180deg) !important; 
     -ms-transform:  rotateY(180deg) !important; 
     -o-transform:  rotateY(180deg) !important; 
     -webkit-transform: rotateY(180deg) !important; 
} 

Answer 1

http://lab.smashup.it/flip/ là tốt nhất mà tôi đã tìm thấy cho việc này.

Answer 2

Giới thiệu về mã hiện tại. Lý do tại sao nó không làm việc theo cách bạn muốn nó chỉ đơn giản bởi vì nó không sử dụng bất kỳ hình ảnh động khi chuyển đổi giữa các lớp học. Bạn có thể sử dụng jQuery UI cho điều đó.

Trên đây: http://jqueryui.com/docs/switchClass/

Answer 3

Ưu điểm của việc sử dụng CSS biến là nó sẽ chạy nhanh hơn và (một khi bạn không cần phải đặt tất cả các phong cách trong năm lần) nó sẽ rất thanh lịch. Nhược điểm là nó sẽ không hoạt động trên một số trình duyệt ở tất cả (tức là các trình duyệt cũ hơn không hỗ trợ chuyển đổi CSS).

Cá nhân, tôi muốn sử dụng các biến đổi CSS. Mã của bạn sẽ trông đẹp hơn theo độ tuổi và trên thiết bị di động không tệ hơn.

tôi sẽ có nhiều phán đoán rằng lý do jQuery của bạn "dịch" thất bại là lớp hiện đang không được loại bỏ bằng cách mã dịch, nhưng họ bởi JavaScript tinh khiết, vì vậy:

$ ('# side-2'). removeClass(). addClass ('...');

Nếu bạn nhìn vào các tùy chọn jQuery - chúng ẩn nội dung của div, sau đó xoay một hình chữ nhật màu, sau đó nạp lại div. Phương thức CSS, khi nó hoạt động, thực sự là hoạt động.