jQuery как сделать эффект flip?

Question

Я пытаюсь подражать эффекту, обычно найденному на мобильных устройствах, где у вас есть панель, и когда вы нажимаете кнопку, она вращается вокруг, а с другой стороны - другая информация.

я нашел код, который usses CSS переходы и 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'; 

}); 

проблема с этим примером является то, что если я конвертировать JavaScript в JQuery он останавливает часы работает:

из:

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

до

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

Также я не уверен, что еще нет плагина jquery, который делает это лучше.

Любые идеи?

несколько больше код. 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/ это лучшее, что я нашел для этого.

Answer 2

О текущем коде. Причина, почему он не работает так, как вы хотите, просто потому, что он не использует анимацию при переключении между классами. Для этого вы можете использовать пользовательский интерфейс jQuery.

Показанный здесь: http://jqueryui.com/docs/switchClass/

Answer 3

Достоинством использования CSS трансформирует это будет работать быстрее, и (когда вам не нужно поместить все стили в пять раз), это будет очень элегантно. Недостатком является то, что он не будет работать в некоторых браузерах вообще (то есть более старые браузеры без поддержки преобразования CSS).

Лично я использовал CSS-преобразования. Ваш код будет выглядеть лучше с возрастом и на мобильном не хуже.

Возьму дикое предположение, что причина вашего Jquery «перевод» не удается, что существующие классы не удаляется от транслируемого кода, но они на чистом JavaScript, так:

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

Если вы посмотрите на параметры jQuery - они скрывают содержимое div, а затем поворачивают цветной прямоугольник, а затем заполняют div. Метод CSS, когда он работает, фактически работает.