Looking to implement a css class toggling feature in jQuery within a function (shoutout 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');
}
Get the full picture here - fiddle.
Here's the breakdown of the classes:
/* 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;
}
/* 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;
}
/* 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;
Query: Can we incorporate animate() to achieve an animated border-radius effect?
Pedro