A guide to smoothly transition box-shadow with jQuery's addClass() function

UPDATED

I have a div with the class .shadow-circle-lg:

<div class="shadow-circle-lg"></div>

To add a different border styling to the div, I am using another class called .circle-highlight:

.circle-highlight{
box-shadow: 
0 0 0 1px rgba(0,0,0, 0.1),
0 0 0 10px rgba(188,190,192, 0.3);
 }

The end result should look like this:

<div class="shadow-circle-lg circle-highlight"></div>

I would like this transition to fade in over a duration of 400ms.

I am attempting to achieve this using a fadeIn animation with the following code:

$this.siblings('.user_icon').find('.shadow-circle-lg').addClass('circle-highlight').hide().fadeIn(400);

However, by hiding the function in this manner first, it creates a "flash" effect as the original visible div disappears. My goal is to only fade in the box-shadow without any other effects.

Do you have any suggestions on how to accomplish this?

Answer №1

To create a smooth transition effect, you can utilize the transition attribute like so:

.circle-highlight {
    transition: box-shadow 400ms;
    box-shadow: 
        0 0 0  1px rgba(  0,  0,  0, 0.1),
        0 0 0 10px rgba(188,190,192, 0.3);
}

Next, simply add the specified class without using fadeIn:

$this.siblings('.user_icon')
        .find('.shadow-circle-lg')
        .addClass('circle-highlight');

You can view a live demonstration here:

http://jsfiddle.net/MTz8E/1/

UPDATE

If you need compatibility with older browsers like Firefox 4 and Opera, consider adding the following CSS:

.circle-highlight {
       -moz-transition: box-shadow 400ms; /* Firefox 4 */
         -o-transition: box-shadow 400ms; /* Opera     */
    -webkit-transition: box-shadow 400ms; /* Chrome    */
            transition: box-shadow 400ms;

    box-shadow: 
        0 0 0  1px rgba(  0,  0,  0, 0.1),
        0 0 0 10px rgba(188,190,192, 0.3);
}

Answer №2

If you're looking for a solution, the callback function of fadeIn could be just what you need. Here's an example to consider:

$this.find('.profile-picture').fadeIn(300, function() { (this).toggleClass('highlighted') });

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

Pager made the bold decision to transition from a horizontal layout to a vertical format

I've been feeling frustrated lately. After being sick for a while, my customer called to inform me that the gallery pager on their website is broken. Although I managed to fix most of it and restore the original style, I'm struggling to get it t ...

Loading times for the Polymer Project are sluggish

The website design is very appealing. However, it seems to be loading quite slowly even on Google's servers. Is there a way to speed up the initial load time of the Polymer site? Additionally, there are numerous HTTP requests being made; is there a wa ...

The document.getElementsByClassName method in JavaScript is returning an Array with a length property value of 0

My HTML contains a list of li elements with one class. I am attempting to collect them all and place them in an array to determine how many have been gathered. However, when I attempt to display the number using the .length property of the array returned b ...

How can I change an array to a string in JavaScript/jQuery and add a specific

Currently, I am tasked with the challenge of converting an array into objects. Furthermore, I also need to add something before each object is displayed. var arrayList = ["image1.jpg","image2.jpg","image3.jpg"]; The desired outcome should look like this ...

Is there a way for me to superimpose text onto an image in this instance?

I am attempting to place a "Text overlay goes here" over the profilepic.jpg image below. I believe there may be an issue with my CSS code. My approach was to create a new div class named overlay and embed that line within the imgcontainer class. Can some ...

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

const DisplayCategory = () => { const history = useHistory(); useEffect(() => { axios.get('http://localhost:8080/products', { headers: { Authorization: "Bearer " + localStorage.getItem("token&q ...

Issues with changing background colors using Jquery animate

I am attempting to create a fading background color effect when a button is clicked. Currently, I can change the background color using this code: $("#" + lblqty).css("background","#e9f1ff"); However, when I try to use the animate function as shown below ...

The foundation grid system is not being implemented

How come my div is not affected by the foundation grid system: render: function(){ var {todos,showCompleted,searchText} = this.state; var filteredTodos = TodoAPI.filterTodos(todos,showCompleted,searchText); return ( <div> ...

Tips on Implementing a CSS Variable in a React Component

Is there a way to use content variable with in-line styles in React? I am unsure of how to accomplish this. CSS3 .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40p ...

Adaptive web layout (Adjusting design based on screen size)

I'm feeling a bit confused about responsive web design. I understand that I can use media queries to apply different stylesheets based on specific screen sizes. For example, a screen at 600px will use one stylesheet while a larger screen will use a co ...

When an li element is styled with a width of 50% and floated to the left, it does not display the bullet points

When attempting to create a 2-column list, I implemented the following CSS: ul { overflow: hidden; } ul li { float: left; width: 50%; } However, I noticed that when I have 2 items in the list, the one on the right displays a list bullet while th ...

Navigating through parent folder HTML files from child folder HTML files

Seeking guidance as I embark on a new project! Check out this link to see my skills in action: collegewebsite.zip Now for the query at hand. I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with J ...

Display a PHP webpage using AJAX

I frequently utilize Ajax to transmit JSON data, but I am encountering an issue. My intention is to move the PHP code from my current page to another page and only display it using Ajax. PHP: <ul class="thumbnails biblio sortable"> ...

Designing PHP Forms with Toggle Visibility Feature

I am facing an issue with my form submission process while trying to create two reports and save the data to a database using specific functions within a class. There are two buttons on the page labeled "Create ES" and "Create RP". Despite the forms funct ...

Troubleshooting Problems with Ajax File Uploads

Welcome to My Unique HTML Form <center> <form enctype="multipart/form-data"> {{ csrf_field() }} <label class="fileContainer"> <input type="file" id="uploadFile" name="input_upload_file[]" multiple /&g ...

The impact of adjusting the article's margin-top on the margin-top of

I want these two divs to have different positioning. The sidebar should remain fixed at the top. Why is the sidebar aligned with the article div instead of sticking to the top? body{ margin: 0; padding: 0; } div#sidebar{ background-color: yel ...

Events that are loaded using jQuery

My webpage features dynamic content generated by PHP, and I am looking to utilize jQuery's load function to refresh the div container periodically. This will ensure that new content is displayed on top of the existing content. The jQuery function I a ...

Auto-complete feature not populating the input field in Google Chrome

Within my register form, I have various INPUT tags present. One of these INPUTs has the name email. <input type=text name=email id=email> When filling out this form in Chrome, I encounter a peculiar behavior. Upon clicking on the email input field ...

get the value of the last selected element using jQuery

I am facing an issue where I cannot retrieve the selected value from my second select element. Even though I have selected the second option in the dropdown, it keeps returning the value of the first option as empty. Here is a snippet of the HTML code: & ...

What could be causing my bootstrap to overlap?

Hello everyone, I am currently in the process of creating a basic template to enhance the overall design of my website. I recently started utilizing Bootstrap and encountered an issue where my footer is overlapping when I resize my browser to a smaller siz ...