What steps should I follow to produce animation in my specific situation?

Question

What steps should I follow to produce animation in my specific situation?

I've been attempting to implement a transition for my elements, but the examples I've come across all rely on the :hover state. What I really need is for the transition to activate when I click a link.

Here's my HTML:

html

<a id='fireme' href=''>FIRE</a>
<div id='test'> Test title 1</div>

CSS

#test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px;
}

JS

$('#fireme').click(function(){
    $('#test').addClass('newWidth')
})

However, when I click the link, no changes occur and the width remains at 150px

Could someone provide assistance with this? Thank you!

jquery html css animation

Answer 1

Answer №1

That is because of the cascading order of CSS style rules.

In this scenario, the style rule with an identifier takes precedence over the rule with a class.

If you prioritize using the class initially, you will achieve the desired result.

To implement this in your HTML, add the class attribute:

<a id='fireme' href=''>FIRE</a>
<div id='test' class='test'> Test title 1</div>

Then, in your CSS, modify the rules:

.test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px;
}

View the changes in action here.

Alternatively, you can increase the priority of your CSS rule:

#test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px !important;
}

Leave the rest as is for now.

Answer 2

That is because of the cascading order of CSS style rules.

In this scenario, the style rule with an identifier takes precedence over the rule with a class.

If you prioritize using the class initially, you will achieve the desired result.

To implement this in your HTML, add the class attribute:

<a id='fireme' href=''>FIRE</a>
<div id='test' class='test'> Test title 1</div>

Then, in your CSS, modify the rules:

.test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px;
}

View the changes in action here.

Alternatively, you can increase the priority of your CSS rule:

#test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px !important;
}

Leave the rest as is for now.

What steps should I follow to produce animation in my specific situation?

Answer №1

Similar questions

How can I display the most recent offcanvas opening at the top of the page?

Initiating an action the moment the element comes into view by scrolling

What is the best way to avoid duplicating this JQM function multiple times and instead reuse it efficiently?

Unable to submit form within a while loop in PHP table

Deactivate the checkboxes with varying attributes

Contact form script malfunctioning, showing a blank white page

Triangles positioned on the edges of a division element

Validating usernames using Jquery's remote method检verifying the username

Like the Word outline view, the list view can be easily collapsed and expanded with a simple click

Attempting to retrieve and substitute the final value within an input field by cross-referencing or evaluating it against a different value

Design a CreateJS/EaselJS website, comprised of multiple web pages, that is not focused on gaming

The text exceeds the maximum width of the table column

What is the best way to split an array into four columns and allocate 10 <li> items from the array to each column?

The jQuery append function does not incorporate CSS styling

Unable to successfully change the Span Class

What is the best way to adjust image size according to the dimensions of the parent container using CSS

Revamp your Redux Form with a fresh new 'Field' label style

Perform a bash command using PHP when an HTML button is clicked

Tips for reliably resizing slider images with varying widths

What could be causing the issue with the functionality of third-level nested SortableJS drag-and-drop?