Transforming a CSS class within a function into a dynamic jQuery animation

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

Answer №1

Although you mentioned wanting to achieve this with animate(), considering that you are already utilizing CSS3, why not simply add a transition to .rocksType_DBitem?

http://jsfiddle.net/hPbQD/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on how to align multiple divs at the center of a container using CSS

Experimenting with centering a divider in the style of Windows metro. .container { height: 300px; width: 70%; background: #EEE; margin: 10px auto; position: relative; } .block { background: green; height: 100px; width: 10 ...

How can I modify the table structure in Ruby on Rails?

Greetings! I am a beginner in the world of Rails and could really use some assistance. Below is the table data extracted from index.html.erb: <table class="table"> <thead> <tr> <th>Area& ...

What is the best way to make a black background div that perfectly aligns with another div?

When hovering over an image, I want it to fade out to opacity: 0.4, but instead of fading to white, I would like it to fade to black. To achieve this, I decided to change the background color of the body to black so that the fadeout will be towards black. ...

"Help! I'm facing an issue with my PHP PDO insert statement

I've been working on developing a web application that allows users to create new projects, but I've hit a roadblock. For the past couple of days, I've been stuck on a particular issue related to the "New Project" button. When this button i ...

Does anyone know the ins and outs of how the website www.nikebetterworld.com was created?

Hello, I am new to web development and I am interested in creating a page similar to the style of nikebetterworld. Can you point me in the right direction on where to start studying to achieve this design? My impression is that it involves multiple scrol ...

"Reduce the height and adjust the row spacing of the Vuetify form for a more

I'm currently working on creating a form using vuetify that closely resembles the one shown in this image: https://i.sstatic.net/4h6YM.png After experimenting with vuetify grid and columns, I've managed to achieve something similar to this: http ...

Transform two fixed elements into dynamic elements using JQuery

Is there a way to replace two static elements in the table <tr class="item-row"> with data from an ajax call instead of just appending to them? Currently, I am using this javascript line to append: $(".item-row:last").after('<tr class="item- ...

Adaptable pictures within a set area

My goal is to design a responsive gallery that displays images of various dimensions. I envision having 5 square divs of equal size on a full screen, with each image centered both horizontally and vertically, scaled to fit with some padding that adjusts pr ...

What is the best way to create a delay so that it only appears after 16 seconds have elapsed?

Is there a way to delay the appearance of the sliding box until 16 seconds have passed? <script type="text/javascript"> $(function() { $(window).scroll(function(){ var distanceTop = $('#last').offset().top - $(window).height(); ...

jQuery live event not triggering on window resize and scrolling

I'm having trouble getting the console.log to work on resize and scroll events. I am certain that jQuery 1.7 is loaded. <script> $(window).live('scroll resize', function () { console.log('am i working?'); }); </scrip ...

Create a responsive Flexslider with a dynamic background image

Has anyone experienced issues with creating a responsive design while working with flexslider and background images? I tried placing contents inside li tags with background images, but it seems to break the slider's responsiveness. Here is the code sn ...

How can information be transferred from a servlet to javascript in an Ajax program?

I am working on enhancing a simple jsp/servlet application by integrating AJAX functionality. Currently, I am utilizing JQuery for this purpose, but the choice of javascript framework is flexible. Here is an example of my code snippet: <script type=" ...

What is the best way to create a sticky menu bar?

I have this code snippet at the beginning of my website: <body> <div class="agile-main"> <div class="menu-wrap" id="style-1"> <nav class="top-nav"> <ul class="icon-list"> ...

Div background image adjusting for parallax scrolling

My goal is to implement a parallax background as a separator for a website. However, I'm facing an issue where the background image only occupies half of the intended size with a white border surrounding it. Despite my efforts, I can't pinpoint t ...

Is it possible to arrange the final divs on top of the initial ones without any overlap between them?

I have a script for uploading files that displays all previously uploaded images in divs with the class "download". When I use a jQuery script to add more pictures, it puts them in divs with the class "upload". I want these new uploads to be displayed ab ...

Interactive Infographics in HTML5 format

Currently, I am unable to find any examples on how to accomplish a specific task mentioned in the following link. If you have a tutorial with step-by-step instructions or a code project available, it would greatly assist me. Link: Evolution of WEB ...

Having trouble with my WordPress theme not recognizing my CSS file

My file path is displayed below: D:\web server\blog.dev.cc\wp-content\themes\ablog\css for java script file path D:\web server\blog.dev.cc\wp-content\themes\ablog\assets\js Despite checking ...

How can I assign a background image to a specific state or template using AngularJS?

While attempting to style the entire template with a CSS div tag, I encountered an issue. The code snippet used was: <div ng-style="{'background-image': 'url(/images/food.png)', 'background-repeat': 'repeat-y'}"& ...

Reactjs: When components are reused, conflicts may arise in UI changes

I'm currently working on creating a sample chat room application using reactjs and redux for educational purposes. In this scenario, there will be 3 users and the Message_01 component will be reused 3 times. Below is the code snippet: const Main = Re ...

Imitate a style using jQuery without deleting other elements

This is an example of HTML code: <div id="id1" style="width:100px;background: rgb(196, 14, 14);">1</div> <div id="id2" style="margin-top:10px">2</div> to <div id="id1" style=&qu ...