1

I know that this isn't technically part of the DOM but does anybody have a nice way of adding/removing CSS3 via jquery on this:

#Current > span:after, .animate > span > span

So I could basically perform this kind of action:

$('#Current > span:after, .animate > span > span').css({
        WebkitTransition : 'move 2s linear infinite',
        MozTransition    : 'move 2s linear infinite',
        MsTransition     : 'move 2s linear infinite',
        OTransition      : 'move 2s linear infinite',
        transition       : 'move 2s linear infinite'
});

3 Answers3

1

Something like this should work just fine. For example, why not put what you want to add into a class, and then do something like:

$('#Current > span:after, .animate > span > span').addClass('transitionClass');

This way you can improve the readability of your code and keep the styling separate from the code logic. If you need to do it individually as CSS, you should refer to this SO post.

Community
  • 1
  • 1
jtromans
  • 4,183
  • 6
  • 35
  • 33
  • Can you be sure that you CSS selector is working in the first place? For example, does $('#Current > span:after, .animate > span > span') return an empty array if you execute it in the Chrome console? – jtromans Nov 12 '13 at 16:47
0

I agree with jtromans, however if you are creating something e.g. a js plugin/component without css, that you need to work directly without any other file dependency then you could set this kind of css3 properties as follows,

/*add properties*/
$('div').css({
    'transform':'rotate(7deg)',
    '-ms-transform':'rotate(7deg)',
    '-webkit-transform':'rotate(7deg)',
    '-o-transform':'rotate(7deg)',
    '-moz-transition':'rotate(7deg)'
});

http://jsfiddle.net/p2w7C/

/*remove*/
$('div').css({
        'transform':'none',
        '-ms-transform':'none',
        '-webkit-transform':'none',
        '-o-transform':'none',
        '-moz-transition':'none'
    });

a simple function could be,

$(document).ready(function () {
    function transform(selector, value) {
        $(selector).css({
            'transform': value,
             '-ms-transform': value,
             '-webkit-transform': value,
             '-o-transform': value,
             '-moz-transition': value
        });
    }
    transform('div', 'rotate(7deg)');
});

http://jsfiddle.net/Hk6JE/

melc
  • 11,523
  • 3
  • 36
  • 41
0

I think a good way is use $.toogleClass function that allow you to add and remove css class easily.

Jab
  • 1