Turn a CSS class inside function into jQuery animation

Question

I have this css class toggling in jQuery inside a function (credits to @Laurence for the code):

function rocksType_shift(direction) {
    $('#rocksType_DBitems_container .before').removeClass('before')[direction]().addClass('before');
          $('#rocksType_DBitems_container .current').removeClass('current')[direction]().addClass('current');
          $('#rocksType_DBitems_container .after').removeClass('after')[direction]().addClass('after');
}

Entire context - fiddle.

The classes have this configuration:

/* CSS styling for the 1st visible item (before) */
.before {
  background-color: Aquamarine;
  -webkit-border-radius: 70px 24px 24px 24px; 
    -moz-border-radius: 70px 24px 24px 24px;       
    border-radius: 70px 24px 24px 24px;
}

/* CSS styling for the 2nd visible item (current) */
.current {
  background-color: Aqua;
  border: 4px solid #000000; 
    -webkit-border-radius: 24px 24px 24px 24px; 
    -moz-border-radius: 24px 24px 24px 24px; 
    border-radius: 24px 24px 24px 24px;
}

/* CSS styling for the 3rd visible item (after) */
.after {
  background-color: Aquamarine;
  -webkit-border-radius: 24px 24px 24px 70px; 
    -moz-border-radius: 24px 24px 24px 70px; 
    border-radius: 24px 24px 24px 70px;

Question: I want to use animate(), so I can animate the border-radius. Can this be done?

Pedro

I think you need to have a look at jQuery css hooks to handle browser name prefixed properties like -moz-border-radius. You could still try to animate the border-radius property, but all browsers that are not fully CSS3 compatible will fail. What do you want to animate exactly ? Depending on what you want to do, it can be done using CSS3 transitions and/or animations. — Virus721
– Virus721, Commented Apr 12, 2013 at 17:34
You can using step option of animate but take into consideration Virus721's comment — A. Wolff
– A. Wolff, Commented Apr 12, 2013 at 17:39

Kaloyan · Accepted Answer · 2013-04-12 17:39:19Z

1

I know you said you want it to be with animate(), but since you already use CSS3, why don't you just do it by adding transition to .rocksType_DBitem ?

http://jsfiddle.net/vNxeY/1/

answered Apr 12, 2013 at 17:39

Kaloyan

7,3324 gold badges36 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A. Wolff Over a year ago

Correct, it's really better to use css3

Pedro Over a year ago

My problem is with IE8 - it doesn't work... and I'm getting to the conclusion that it will never work.

Collectives™ on Stack Overflow

Turn a CSS class inside function into jQuery animation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related