SwitchClass с использованием jquery приводит к прерывистой анимации

привет Может ли кто-нибудь определить, почему при нажатии на заголовок он не перемещается плавно во вторую позицию, он прыгает влево, а затем плавно поднимается вверх. он должен плавно двигаться по диагонали. глянь сюда: http://jsfiddle.net/postcolonialboy/8degh3Lb/2/

ТАКЖЕ: есть ли способ использовать клавишу ESC, чтобы вызвать это. Спасибо

HTML

 .title-before {


z-index: 100;


font-size: 25vw;


color: blue;


font-weight: 600;


text-rendering: optimizeLegibility;


position: fixed;


display: inline-block;


vertical-align: middle;


margin: 10% auto;


top: 0;


right: 0;


bottom: 0;


left: 0;


text-align: center;


background-color: none;


-webkit-filter: blur(1.0vw) saturate(400%) contrast(500%);


filter: blur(1.0vw) saturate(400%) contrast(500%);


}


.title-after {


z-index: 10;


font-size: 10vw;


color: blue;


font-weight: 600;


text-rendering: optimizeLegibility;


position: fixed;


background-color: none;


-webkit-filter: blur(0.4vw) saturate(400%) contrast(500%);


filter: blur(0.4vw) saturate(400%) contrast(500%);


}

Код (разметка): JS

 (function($) { $.fn.switchClass = function(remove, add) { var style = { 'transition-property': 'all', 'transition-duration': '2.0s', 'transition-timing-function': 'ease-out' }; return this.each(function() { $(this).css(style).removeClass(remove).addClass(add) }); }; }(jQuery)); $(function() { $("div").click(function() { $(this).switchClass("title-before", "title-after"); }); })

Код (разметка): CSS

 <div class="title-before"> Text </div> 

Код (разметка):

jQuery нажатие клавиши()

не работает? Вместо этого попробуйте использовать свою собственную страницу через jsfiddle

Установка функции синхронизации на ноль тоже помогает:
http://jsfiddle.net/8degh3Lb/33/

Привет.

Вместо использования последовательности jQuery .removeClass("x") + .addClass("y"),

обычно люди используют просто один одноэтапный .addClass("y"), чтобы добиться эффекта CSS-перехода.

Таким образом, «y» на самом деле является дополнительным стилем для этого элемента.

Я заметил одну проблему с вашим переходом.

выравнивание текста. Его нельзя анимировать.

В зависимости от браузера клавиша Escape (и ряд других системных клавиш) МОГУТ быть заблокированы.

Тем более, если вы полагаетесь на jQuery, чтобы попытаться его перехватить. МНОГО ваших проблем связано с глупостью и абсурдностью jQuery, тем более с настройкой перехода от сценариев.

но ОЧЕНЬ сложно диагностировать, что происходит, без ПОЛНОЙ разметки, а не только вашего объекта триггера - но в целом говоря, все это Пахнет классами для элементов, измерения, на которые не следует полагаться (например, vw), отправляются во все браузеры...

... и действительно, если вы собираетесь использовать vw из vh, вы могли бы с тем же успехом сказать, к черту это, и даже не беспокоиться о сценариях и либо использовать привязку с псевдоклассом has и CSS':target, либо злоупотреблять флажком вне формы с :checked в качестве триггера.

 
.showHide {
display:none;
}

@media (min-width:1px) {

.showHide + h2 + div {
display:none;
}

.showHide:checked + h2 + div {
display:block;
}

}

Код (разметка):

 <input type="checkbox" id="showHide_something" class="showHide"> <h2><label for="showHide_something">Something</label></h2> <div class="titleAfter"> Content to show/hide here </div>

Код (разметка): просто измените состояния отображения внутри медиа-запроса на два состояния переключения.

Никаких сценариев не требуется.

Помещение его в этот медиа-запрос означает, что текст будет нормально отображаться в старых браузерах, которые не могут использовать какие-либо хитрости CSS3... что-то, из-за чего ваша версия со сценарием в данный момент разваливается. Не работает в IE8/более ранних версиях, ну да ладно.

то, что у вас есть сейчас, тоже не работает.

Во всяком случае, это работает лучше, поскольку в старых браузерах контент будет постоянно отображаться в обычном/плоском режиме — то есть «изящная деградация»; поскольку доставка контента важнее, чем дурацкий анимированный скрипттард «Ну и дела, разве это не аккуратно» или даже чушь CSS.

Хм... У ОП, кажется, были ответы откуда-то еще.
http://www.codingforums.com/javascr...lass-using-jquery-makes-choppy-animation.html

Если вы измените длительность перехода на ноль секунд, вы не получите эффекта пошагового перехода.

 $(this).css(style).removeClass(remove)
//sleep for .5 seconds
$(this).css(style).addClass(add)

Код (разметка): то, что он делает, нарушает это

 $(this).css(style).removeClass(remove).addClass(add)

Код (разметка): в

  var style = { 'transition-property': 'all', 'transition-duration': '0.0s', 'transition-timing-function': 'ease-out' };

Код (разметка): вам просто нужно удалить команду сна, что вы и делаете, отредактировав продолжительность перехода.

спасибо, я выбрал этот вариант, и он отлично работает. я все еще не мог вызвать его с помощью клавиши esc... HTML

 .title {


z-index: 100;


font-size:25vw;


color: blue;


text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;


font-weight: 600;


text-rendering: optimizeLegibility;


position:fixed;


display:inline-block;


left: 25vw;


top: calc(50vh - 12.5vw);


background-color: none;


-webkit-filter: blur(1.0vw) saturate(400%) contrast(500%);


filter: blur(1.0vw) saturate(400%) contrast(500%);


transition-property: all;


transition-duration:1.0s;


transition-timing-function: ease-out;


}


.title-after {


font-size: 10vw;


position:fixed;


margin: 0px;


top: 0px;


left: 0px;


background-color: none;


-webkit-filter: blur(0.4vw) saturate(400%) contrast(500%);


filter: blur(0.4vw) saturate(400%) contrast(500%);


}

Код (разметка): js

 $(function(){ $("div.title").click(function() { $(this).addClass("title-after"); }); })

Код (разметка): css

 <div class="title">Text</div>

Код (разметка):