jquery change class (not toggle)

HTML

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

CSS

.title-before {
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;vertical-align:middle;margin:10% auto;top:0;right:0;bottom:0;left:0;padding:13px 20px 13px 20px;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;
  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; 
  background-color: none;
  -webkit-filter: blur(0.4vw) saturate(400%) contrast(500%);
          filter: blur(0.4vw) saturate(400%) contrast(500%);
}

JavaScript

(function($){
  $.fn.switchClass = function(remove, add){
    var style = {
        'transition-property'        : 'all',
        'transition-duration'        : '0.3s',
        'transition-timing-function' : 0
    };

    return this.each(function(){
        $(this).css(style).removeClass(remove).addClass(add)
    });
  };
}(jQuery));

$(function(){
  $("div").click(function() {
    $(this).switchClass("title-before", "title-after");
  });
})