remove some of the transition values using jquery

Problem

I have applied multiple transition effects such as rotation scaleX scaleY now if I want to remove any of them then how can I do this using jquery

for example:

var value = "rotate("+rotatevaluee + ") ScaleX(" + scalevalue+")";
$('.active').css({'transform':value,'-ms-transform':value,'-webkit-transform':value,'-o-transform':value,'-moz-transform':value});

// remove ScaleX()

$('.active').remove('ScaleX()');
Problem courtesy of: Anni

Solution

A neat solution is to change the variable itelf , like in here :

How to work with multiple CSS properties?

function changeTransform(el, x,y){
     var val = x + " " + y;
     $(el).css({"-webkit-transform":val, "-moz-transform": val, "-webkit-transform": val, "-o-transform": val});
  }

so in your case :

var value = "rotate("+rotatevaluee + ") ScaleX(" + scalevalue+")";
$('.active').css({'transform':value,'-ms-transform':value,'-webkit-transform':value,'-o-transform':value,'-moz-transform':value});

value="rotate("+rotatevaluee + ")";

$('.active').css({'transform':value,'-ms-transform':value,'-webkit-transform':value,'-o-transform':value,'-moz-transform':value});
Solution courtesy of: ProllyGeek

Discussion

I would try this:

var transValWithScaleX = "rotate("+rotatevaluee + ") ScaleX(" + scalevalue+")";
var transValNoScaleX = "rotate("+rotatevaluee + ")";

var applyCSS = function(value) {
    $('.active').css({
        'transform':value,
        '-ms-transform':value,
        '-webkit-transform':value,
        '-o-transform':value,
        '-moz-transform':value
    });
};

//With ScaleX
applyCSS(transValWithScaleX);

//Remove ScaleX()
applyCSS(transValNoScaleX);
Discussion courtesy of: lshettyl

"Remove" css property by setting it to default or "" (empty string).
E.g. you firstly set a{display: block;} and want to remove it, so set it again: a{display:inline;} and it will 'remove' property.

Discussion courtesy of: Justinas

This recipe can be found in it's original form on Stack Over Flow.