Activate/deactivate CSS transition using jQuery hover state

Trying to prevent a "reversing" css transition when un-hovering the element. To keep it in its "forward" position and repeat the "forward" transition upon hovering again is the goal.

This is what has been attempted:

Using jQuery

jQuery(document).ready(function() {

jQuery("#fancy_icon-51-66").mouseleave(function () {
  jQuery(this).removeClass("start-transition");
  jQuery(this).addClass("stop-transition");
});
jQuery("#fancy_icon-51-66").mouseenter(function () {
  jQuery(this).removeClass("stop-transition");
  jQuery(this).addClass("start-transition");
});

});

With CSS

.stop-transition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

.start-transition {
-webkit-transition: transform 0.5s !important;
-moz-transition: transform 0.5s !important;
-o-transition: transform 0.5s !important;
transition: transform 0.5s !important;
}

The transition itself involves a transform -> rotate 360°.

As a beginner seeking help to accomplish this, any suggestions are greatly appreciated! Thank you!

jquerycsstransition

Answer №1

HTML

 <div id='element'>HELLO</div>

CSS

 #element {position:relative; float:left; width:20%; height:20%; background:#000; border:1px solid #fff; color:#fff; padding:20px; text-align:center;}

 .animate {animation:animated 1s linear;}
 @keyframes animated {
 to {transform:rotate(360deg);}
 }

jQuery (3.4.1)

 $(document).on('mouseenter','#element',function() {
 $('#element').addClass('animate');
 $('#element').on("animationend", function() {
 $('#element').removeClass('animate');
 });
 });


$(document).on('mouseenter','#element',function() {
$('#element').addClass('animate');
$('#element').on("animationend", function() {
$('#element').removeClass('animate');
});
});
#element {position:relative; float:left; width:20%; height:20%; background:#000; border:1px solid #fff; color:#fff; padding:20px; text-align:center;}

.animate {animation:animated 1s linear;}
@keyframes animated {
to {transform:rotate(360deg);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='element'>HELLO</div>

Link to JSFiddle

Answer №2

Using External CSS for Font Awesome Icons

To incorporate Font Awesome icons into your website, simply add the following line within the <head> section of your HTML document

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Custom CSS Styles

div i {
    padding: 10px;
    transition: transform 1.5s !important;
}
    
div i:hover {
    -webkit-transition: transform 1.5s !important;
    -moz-transition: transform 1.5s !important;
    -o-transition: transform 1.5s !important;
    transform: rotate(360deg);
}

HTML Implementation

Insert the code snippet below in the <body> section of your HTML page

<div>
    <i class="fa fa-thumbs-o-up" style="font-size:48px;"></i>
</div>


div i {
  padding: 10px;
  transition: transform 1.5s !important;
}

div i:hover {
  -webkit-transition: transform 1.5s !important;
  -moz-transition: transform 1.5s !important;
  -o-transition: transform 1.5s !important;
  transform: rotate(360deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <i class="fa fa-thumbs-o-up" style="font-size:48px;"></i>
</div>

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

Navigating through the list of items in the navbar to find a specific element by

I have a question about my navbar functionality -- specifically, I want to be able to click on a navbar item and then smoothly scroll down to the corresponding id element. Here is the structure of my navbar: <nav class="navbar navbar-default navbar-st ...

jqueryjquery-animatescrolltop

Position the image to the right of the dropdown menu in Bootstrap

While working with Bootstrap to create a top navbar on my webpage, I encountered some issues: Once the navbar dropdown is opened, I need to display an option list alongside an image positioned to the right of the list. The image should be the same height ...

htmlcsstwitter-bootstrap

Use Jquery to locate an element by its Id and then trigger a click event on

Struggling with integrating two Ajax methods in my code, I am looking for a way to make one of them trigger the other. Here is an example scenario: $(function() { //Code that simulates clicking #target and triggers the method below. }); $( "#t ...

jquery

The PHP function is failing to communicate with jQuery and Ajax

Having trouble with PHP return to jQuery/Ajax functionality, When I try to edit an item, the error message displays even though the success function is executed. On the other hand, when attempting to delete an item, nothing is displayed despite the succes ...

javascriptphpjqueryajax

My CSS horizontal drop-down menu is causing the sub-navigation items to overlap each other

I'm having an issue where my sub navigation menu items are stacking on top of each other instead of displaying properly. Here is the code snippet causing the problem: /* STYLING FOR NAVIGATION MENU */ .nav-bar { width: 100%; height: 80px; ...

htmlcssdrop-down-menumenunav

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...

javascriptcsshtmljquery-pluginssvg

The built-in functions of Wordpress are not able to be identified in the ajax PHP file

As a newcomer to Wordpress development, I am facing challenges with implementing ajax on my WordPress site. I am currently working on a plugin that requires the use of ajax. However, my php file (xxxecommerce.ajax.php) is not recognizing the built-in Word ...

javascriptphpjqueryajaxwordpress

The variable is constantly reverting back to its initial value

Here is the code snippet: function send() { var nop = 6; var send_this = { nop: nop }; $.ajax({ type: "GET", data: send_this, url: "example.com", success: function(r) { ...

javascriptjqueryjson

having difficulty placing 3 pop-up windows on a single page

Struggling to implement multiple popups on my page, each with a unique ID assigned. Any assistance would be greatly appreciated. Here is the code snippet: .fa { font-size: 50px; cursor: pointer; user-select: none; } .fa:hover { font-size:20px; t ...

javascripthtmljquerycss

Ensure that the Bootstrap image element maintains its full height without resizing

While working on my Angular application, I encountered an issue with designing a side list-group of recent blogs using Bootstrap 4. When the aspect ratio is changed to mobile view, the images resize and become smaller to fit into the div as the title lengt ...

htmlcssbootstrap-4

Clicking a button in a custom dialog header using jQuery

I am in the process of developing a jQuery Dialog that covers the entire screen. To create a personalized header for the Dialog, I have set up a custom <div>. Within this <div>, there is a nested <table>. The <table> consists of 1 ...

jqueryeventsbuttondialogclick

Is it possible to create varied background shades in CSS3 without relying on images?

Check out this fiddle: http://jsfiddle.net/dzAJp All the divs are styled with a light blue background color using the background-color CSS property instead of background-image. I want to darken the second div slightly by combining its current background ...

css

Executing Javascript to populate a div element with content based on its CSS class

Is there a way to isolate my View (HTML & CSS files) within a controller like JavascriptCode/AJAX, so that upon page load, only the controller binds the data to a specific element such as a DIV based on its class? Do you think this is achievable? If so, ...

javascriptjqueryhtmlcss

What is the reason for translate3d(…) causing a scrollbar to appear on iframes?

Is there a way to hide the tiny, fixed scrollbar that appears at the bottom of an <iframe> with overflow-x: scroll, even when there is no content to scroll, while keeping the transform: translate3d(0px, 0px, 0px) style set? https://i.sstatic.net/kaV ...

htmlcssiframe

Is there a way to get rid of the tiny black line beside the Instagram icon?

Here is the display on my website This is the code that was used I am struggling to identify the source of the small black "-" line next to the Instagram icon logo. ...

javascripthtmlcss

Loss of value in .net Jquery CheckBox onchange event

My JQuery code for CheckBoxes is causing some unexpected behavior: $(document).ready(function () { $('#chk_AGVS').change(function () { if ($(this).is(":checked")) { '<%Session["chkAGVS"] ...

javascriptjquery.net

Leveraging jQuery for vertical alignment of an image

I am trying to vertically center an image with the class .personal within a container with the class .personal-row (located inside .row-main) on page load and when resizing. Initially, I attempted using vertical-align: middle;, but that did not yield the d ...

jquerycss

Save the Ajax "stack" variable to a text file rather than duplicating it

I have a question regarding posting variables to a .txt file. The variable in question is '10'. However, every time I post the variable, the .txt file simply keeps adding "10" instead of stacking it. Ideally, I want it to display 10 on the first ...

phpjqueryajaxpost

Incorporate dynamic rules into a CSS stylesheet

I am trying to dynamically add a rule to my CSS for each element. Each rule should have a different background-image and name. However, I seem to be encountering an issue where the dynamically added div is not linking to the dynamically added CSS rule. I&a ...

javascripthtmlcssajaxrules

Is there a way to alter a class using ng-class only when the form is deemed valid?

I am trying to implement a feature where an input field shows as required, but once the user enters text, it indicates that the input is valid by changing the border color from red to green. I am facing an issue with this line of code always returning fal ...

javascripthtmlcssangularjs