SwitchClass using jquery makes for choppy animation

hello

can anyone identify why when the title is clicked it doesn't move smoothly to the second position, it jumps to the left then goes up smoothly.

it should move diagonally smoothly.

see here: http://jsfiddle.net/postcolonialboy/8degh3Lb/2/

ALSO: is there a way to use the ESC key to trigger this as well.


thanks




html

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

Code (markup):

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");
  });
})

Code (markup):

CSS

.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%);
}

Code (markup):

 

Hi.
Instead of using jQuery's .removeClass("x") + .addClass("y") sequence,
usually people would use simply one, single-step .addClass("y") to get CSS transition in effect.
So the "y" is really an additional / extra styling for that element.

I spot one problem with your transition... text-align.
It can't be animated.

 

thanks, i went for this option and it works fine.

i still wasn't able to trigger it using the esc key...

html

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

Code (markup):

js

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

Code (markup):

css

.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%);
}

Code (markup):

 

jQuery's keypress() doesn't work? Try with your own page instead through jsfiddle

 

Depending on the browser, the escape key (and a number of other system keys) MAY be locked out. More so if you're relying on jQuery to try and trap it.

A LOT of your issue comes from the silliness and absurdity that is jQuery, more so setting the transition from the scripting... but it's VERY hard to diagnose what's going on without the FULL markup, instead of just your trigger object -- but generally speaking the whole thing REEKS of classes for nothing on elements, measurements that shouldn't be relied upon (like vw) being sent to all browsers...

... and really if you're going to use vw of vh, you might as well say screw it, and not even bother with the scripting and either use a anchor with a has and CSS' :target pseudoclass, or abuse a checkbox outside a form with :checked as your trigger.

<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>

Code (markup):

.showHide {
	display:none;
}

@media (min-width:1px) {

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

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

Code (markup):

Just change the display states inside the media query to your two toggle states. No scripting needed. Putting it inside that media query means the text will show normally in older browsers that can't pull any of the CSS3 trickery... something your scripted version kind-of falls apart on at the moment.

Doesn't work in IE8/earlier, oh well... what you have now doesn't either. If anything this works better as the content will just be shown flat/normal all the time in older browsers -- aka "Graceful Degradation"; since delivering content is more important than goofy asshat "gee ain't it neat" animated scripttard or even CSS bullshit.

 

Hmm... OP seems to have had some answers from somewhere else
http://www.codingforums.com/javascr...lass-using-jquery-makes-choppy-animation.html

 

Setting the timing function to zero does the trick too:

http://jsfiddle.net/8degh3Lb/33/