Issues regarding the animation and hover effects of a button

I have successfully created a button with an animation on my webpage. The button pops up after 3-4 seconds, and when the user hovers over it, it widens. However, I'm encountering an issue where the pop-up animation restarts every time the button is hovered over. The CSS code responsible for this animation can be found at header .down_text .button-play around line 140.

   

header {
/* CSS styling for header */
}

 /* More CSS styles here... */

@keyframes heading {
/* Keyframes for heading animation */
}

header .down_text .button-play {
/* Styles for the button play animation */
animation: popUp normal forwards ease-in-out;
}

header .down_text .button-play:hover {
/* Styles for hover animation on the button */
}

/* Media queries for different screen sizes */

Answer №1

In my opinion, solving this issue solely with CSS is not feasible.

To address this, I created a new class called pop-up which includes the necessary animation properties and applied it to the button:

header .pop-up {
  animation: popUp normal forwards ease-in-out;
  animation-duration: 5s;
}

Next, using jQuery, I implemented functionality to remove the class on mouseover:

$(document).ready(function() {
  $(".button-play").mouseover(function() {
    if ($(".button-play").hasClass("pop-up")) {
      $(this).removeClass("pop-up");
    } else {
      // perform an alternative action
    }
  });
});

Check out the fiddle

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

Ways to boost an array index in JavaScript

I recently developed a JavaScript function that involves defining an array and then appending the values of that array to an HTML table. However, I am facing an issue with increasing the array index dynamically. <script src="https://cdnjs.cloudflare. ...

Automatically executing a JavaScript function

I stumbled upon a javascript function that can reverse colors on a webpage: String javascript = "javascript: (function (){var newSS, styles = '* { background-color: black ! important; color: green !important; }a:link, a:link * { color: green !importa ...

Reduce the text of the link

Trying to simplify a task, but I'm struggling with the solution. What I want to achieve is shortening a link to 30 characters and adding ... at the end if it's longer. Also, I'd like to make it possible to see the full link on hover similar ...

Prevent users from inserting images from their desktop into the HTML by disabling

While working on a HTML5 drag and drop image uploading feature, everything was going smoothly. I had a small div in the HTML with a JavaScript event handler set up like this: $('#uploader').on('dragover', function(e){ ... }).on(&apos ...

Tips for inserting PHP information into the <link rel="stylesheet" type="text/css" href="CSS/sheet.css" /> reference tag

In my script, I have successfully implemented a feature that displays the OS and browser details. The output is in the form of eight CSS scripts, showcasing Mac, PC, and Ubuntu OS's with IE, Firefox, Safari, and Chrome browsers. While the script is st ...

Enhance your HTML rendering with Vue.js directives

Check out this cool code example I created. It's a simple tabs system built using Vue.js. Every tab pulls its content from an array like this: var tabs = [ { title: "Pictures", content: "Pictures content" }, { title: "Music", c ...

Styling a Form Submission with CSS

I am currently working on a website that contains the following PHP code: echo "<form action='choice.php' method='post'>"; echo "<input type='submit' name='choice' value='left' /> "; As I am i ...

The hover effect is not altering the color

$(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 200) { $(".nav-bg").css({ "background": "#fff", ...

Merge a dropdown menu with an alphabetically arranged list that is interactive with clickable options

I am still learning HTML and Javascript but I'm doing my best. Currently, I am facing a challenge where I need to create a button that, when clicked, opens a dropdown menu containing a table of data. The user should then be able to select a number fr ...

Is there a way to direct the user's cursor to a specific location on the page when they hover over an image?

I'm interested in creating a script that can manipulate the user's mouse position when they hover over an image. For example, if I hover over the image, I want the mouse to be dragged lower towards a specific text. Is there a method to achieve th ...

Utilize php readfile to fetch and display numerous image files

I am attempting to retrieve and display multiple image files from a folder that is protected by a .htaccess file using PHP's readfile() function. The issue I am encountering is that only the first image is successfully read and displayed in the brows ...

Using Angular 2 to toggle visibility based on a select box's value

<div class="form-group"> <label class="col-md-4 control-label" for="is_present">Is Present?</label> <div class="col-md-4"> <select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === tr ...

Attempting to insert an image logo within a Bootstrap logo design

Trying to customize my nav bar with a logo instead of text, but my attempts have been unsuccessful so far. Here is what I have tried: <li class="nav-item"> <a class="nav-link active" aria-current="page" img src=&q ...

Align text divs vertically and ensure font size is responsive within a container div

Within this designated div, I have included: https://i.stack.imgur.com/j099H.png In an attempt to ensure that the font size of the text adjusts responsively, I implemented the following code: font-size:calc(xx + 1.5vw); However, upon resizing the scree ...

Mobile-formatted inline Bootstrap

Using bootstrap and seeking to have elm1, elm2, and elm3 displayed inline on mobile devices? Take a look at the code snippet below: <div class="container-fluid"> <div class="form-group"> <label class="control-label col-sm ...

What is the best way to display SQL query results in a list upon clicking a tab?

I have imported an SQL file containing a table named student_tb. This table consists of three columns: student_id, student_name, and class_name. To create this SQL table, you can follow the script below: CREATE TABLE `student_tb` ( `student_id` int(11) ...

Is it possible to replicate, modify, or recycle a purely HTML and CSS component in Angular?

On my Angular website, I am looking to reuse a component across more than 30 pages. While the majority of the pages have similar CSS, the content inside varies. I know I can simply insert <app-example></app-example> on all the pages, using < ...

Prevent the rendering of HTML in the combobox dropdown menu

Utilizing ExtJs 3.1 In my Ext.form.ComboBox, the store includes values such as: "value1", "<value2>", "value3". The issue arises when the combobox dropdown list is displayed, and "<value2>" is being interpreted as an HTML tag. This is causing ...

The horizontal scrollbar in PrimeNG's p-tree is cleverly concealed until I reach the bottom of the div and start scrolling

I'm facing an issue where the horizontal scrollbar in my p-tree component is hidden until I scroll all the way down. I've tried various CSS modifications, but nothing seems to work. It's surprising that I couldn't find anyone else with ...

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...