Jquery adds a fun, wobbly effect to animations

I'm experiencing an issue with the animation I've implemented causing some slight shaking and wobbling of the text and certain elements which is affecting the overall look. You can view a live example of this behavior here:

This problem specifically occurs when displaying the "days left" over the register menu item.

Below are the code fragments that contribute to this issue:

<ul id="menu">
    <li></a><a href="register.php">REGISTER</a><div id="register_hover"><span>REGISTER NOW!</span><div id="register_hover_arrow"></div></div></li>
</ul>

#menu {
    text-align: justify;
    width: 50em;
    height: 1em;
}

#menu li {
    position: relative;
}

#register_hover {
    -webkit-border-radius: 2px;
    background-color: #FFA200;
    -moz-border-radius: 2px;
    letter-spacing: 0.25em;
    font-weight: normal;
    position: absolute;
    border-radius: 2px;
    text-align: center;
    font-size: 0.9em;
    height: 1.5em;
    width: 300%;
    top: -2.5em;
    left: -100%;
}

#register_hover span {
    position: relative;
    top: .25em;
    z-index: 2;
}

#register_hover_arrow {
    margin: 0 auto;
    -webkit-transform: translateY(-.8em) rotate(45deg);
    -ms-transform: translateY(-.8em) rotate(45deg);
    transform: translateY(-.8em) rotate(45deg);
    background-color: #FFA200;
    position: relative;
    height: 1em;
    z-index: 1;
    width: 1em;
    top: .6em;
}

Javascript fragment:

var animateDeadlineAlert = function() {
    var originalYOffset = $('#register_hover').css('top');
    $('#register_hover').animate({
        'top': '-3em'
    }, function() {
        $(this).animate({
            'top': originalYOffset
        }, function() {
            animateDeadlineAlert();
        });
    });
};

animateDeadlineAlert();

JSfiddle link for reference: http://jsfiddle.net/wd0xj3rb/

javascriptjqueryhtmlcss

Answer №1

Utilizing the translate method proves to be much more efficient than animating the top value using jQuery. By animating elements with transform, you can avoid triggering layout or paint, making it a far superior option compared to manually calculating position based on pixels with jQuery.

A highly recommended talk by Paul Lewis addresses this issue, shedding light on the jittery movement problem that many encounter when trying to animate elements.

In essence, always opt for using transform whenever feasible. Your described issue aligns perfectly with this solution.

.hover {
  position: absolute;
  -webkit-animation: 1s hover-deadline infinite alternate;
  ease;
  animation: 1s hover-deadline infinite alternate;
  ease;
  padding: 1em;
  background: tomato;
  color: white;
  font: bold 1em sans-serif;
}
@-webkit-keyframes hover-deadline {
  from {
    -webkit-transform: translateY(0px)
  }
  to {
    -webkit-transform: translateY(25px)
  }
}
@keyframes hover-deadline {
  from {
   transform: translateY(0px)
  }
  to {
    transform: translateY(25px)
  }
}
<div class="hover">Some text</div>

Answer №2

As per Jason's response, this is indeed a valuable solution. To further clarify, I have provided an example.

In the demonstration below, I am utilizing a linear function to achieve the same result as the animation present in your code.

a {
  text-decoration: none;
  color: black;
}
#menu {
  text-align: justify;
  width: 50em;
  height: 1em;
}
#menu li {
  position: relative;
  width: 5em;
  list-style-type: none;
}
#register_hover {
  -webkit-border-radius: 2px;
  background-color: #FFA200;
  -moz-border-radius: 2px;
  letter-spacing: 0.25em;
  font-weight: normal;
  position: absolute;
  border-radius: 2px;
  text-align: center;
  font-size: 0.9em;
  height: 1.5em;
  width: 300%;
  top: -2.5em;
  left: -100%;
  animation: anim 0.4s linear infinite alternate;
  -webkit-animation: anim 0.4s linear infinite alternate;
}
#register_hover span {
  position: relative;
  top: .25em;
  z-index: 2;
}
#register_hover_arrow {
  margin: 0 auto;
  -webkit-transform: translateY(-.8em) rotate(45deg);
  -ms-transform: translateY(-.8em) rotate(45deg);
  transform: translateY(-.8em) rotate(45deg);
  background-color: #FFA200;
  position: relative;
  height: 1em;
  z-index: 1;
  width: 1em;
  top: .6em;
}
@keyframes anim {
  from {
    transform: translateY(-10px)
  }
  to {
    transform: translateY(0px)
  }
}
@-webkit-keyframes anim {
  from {
    -webkit-transform: translateY(-10px)
  }
  to {
    -webkit-transform: translateY(0px)
  }
}
<br />
<br />
<ul id="menu">
  <li>
    <a href="register.php">REGISTER</a>
    <div id="register_hover"><span>REGISTER NOW!</span>
      <div id="register_hover_arrow"></div>
    </div>
  </li>
</ul>

Answer №3

@Sarah nailed it. Opting for CSS3 animations whenever possible is ideal, but in this case, JavaScript would have sufficed since the animation was relatively straightforward. The issue stemmed from using a separate div to generate the bottom arrow, when utilizing :after could have achieved the same result with simplicity.

Check out this example that combines both concepts and incorporates @Sarah's suggested solution:

https://jsfiddle.net/9j49sLkc/

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

Tips for utilizing ajax function to refresh database entries

I am working with a customer information table that is populated from a database. The last column in this table contains an edit button which, when clicked, shows a popup window with text fields pre-filled with database values. I want users to be able to u ...

javascriptphpjquerymysqlajax

Adding flair to the selected element in the HTML nav bar

I was attempting to customize the appearance of the active item within an HTML navigation bar, which corresponds to the a element. To test this out, I used the example from Here is my modified code, where I introduced a new class "active" and applied the ...

htmlcss

Transform JSON structure (Group data)

Here is the JSON object I am working with: [{ "name" : "cat", "value" : 17, "group" : "animal", }, { "name" : "dog", "value" : 6, "group" : "animal", }, { "name" : "snak", "value" : 2, "group" : "animal", }, { "na ...

javascriptjson

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

I received some initial code from a tutorial and I've been having trouble setting the correct size. Despite searching through documentation for solutions, it seems like there's a fundamental aspect that I'm overlooking. The main issue is tha ...

htmlreactjstailwind-css

Best Practices for Monitoring Actions in EmberJS: Detecting Clicks

I have recently delved into learning emberjs and I am facing challenges in understanding how different components interact with each other, as well as grasping the best practices for implementation. My goal is to utilize ember's provided class bindin ...

jqueryember.jsember-cli

It appears that using "object[prop]" as a name attribute does not function properly in HTML

After using console.log on the req.body I received this output: [Object: null prototype] { 'shoe[name]': 'Shoe Name', 'shoe[description]': '', 'shoe[pictures]': '', 'shoe[collections] ...

javascriptnode.jsmongodbformsexpress

Issue with Jquery .scroll method not triggering display:none functionality

Styling Using CSS #acc-close-all, #to-top { position: relative; left: 951px; width: 29px; height: 42px; margin-bottom: 2px; display:none; } #acc-close-all a, #to-top a { position: absolute; float: right; display: block ...

javascriptjqueryhtmlcss

What causes the width of a card to vary between Windows and a Macbook Pro?

Here is the code I have: <div id="app"> <v-app id="inspire"> <v-content> <v-container> <v-card max-width="1000" class="mx-auto" > <v-form v-model="valid"> ...

cssvue.jsbootstrap-4vue-componentvuetify.js

Tips for formatting a phone number using regular expressions in [Vue 2]

I am currently working on creating regex code that will meet the following requirements: Only allow the first character (0th index) in a string to be either a '+' symbol or a number (0-9). No non-numerical values (0-9) should be allowed anywhere ...

javascriptregexvue.jsvuejs2regex-group

The body of the POST request appears to be void of any

Whenever I make a request using curl or hurl, an issue arises. Despite req.headers['content-length'] showing the correct length and req.headers['content-type'] being accurate, req.body returns as {}. Below is the Hurl test: POST http:/ ...

javascriptnode.jsexpresspost

What is the best way to terminate a "for await ...of" loop if it fails to finish within a specified timeframe?

Is it possible to stop an asynchronous loop if it doesn't finish within a set time frame? I'm working with the following code: (async()=>{ for await(let t of asynDataStreamOrGenerator){ //some data processing } //some other code I n ...

javascriptecmascript-6es6-promise

My header has a video background that appears aesthetically pleasing on a desktop screen. However, when viewed on a mobile device, it is off-center and doesn't span the full

I am having an issue with a header that has a video background. It looks great on desktop, but on mobile devices, it is only taking up about 2/3 of the screen width and is aligned to the left side instead of filling the entire width. I have tried several ...

htmlcss

After applying styling, the modal close button refuses to be clicked

I'm currently facing an issue where I am trying to enhance a modal window with a close button, but encounter problems once styling is applied. The unique aspect of this problem arises from the fact that the close button is not directly in the page HTM ...

javascripthtmlangularjsbootstrap-modal

Is there a way to modify the value of an object in a Vuex store using actions in Vue.js?

I have data stored in an array within the state and I need to update a specific object. How can I change the value of the object with id 1 to true using Vuex actions? state.js const array=[] mutations.js storeArray(state, data) { state.array = data ...

javascriptvue.jsvuex

How can you alternate a button's text using jQuery?

Seeking advice on jQuery and Javascript: Take a look at this HTML snippet: <div class="quandoo-widget" id="quandoo-booking-widget"></div> <script src="https://booking-widget.quandoo.com/index.js" data-merchant-id="48554" data-theme="dark"& ...

jqueryhtmlcss

New to React: Arrow Function Example that Might Puzzle You

As a beginner in React/ES6, I came across this code snippet for handling a checkbox within a custom component that contains a material-ui CheckBox. My goal is to expand the custom component by adding more fields, such as a textbox where users can provide a ...

javascriptreactjsmaterial-uiarrow-functions

Angular Material Flex is not providing the correct size

There seems to be a problem with certain values for setting the flex property in the Angular Material layout library. The issue is clearly demonstrated in this straightforward example. By clicking through, you can observe that some values display correctl ...

javascriptangularjsmaterial-designflexboxangular-material

What are some creative ways to customize the appearance of a PHP email form body?

I need assistance in creating a PHP form that will generate an email with visually appealing formatting. Currently, when I receive the submitted form via email, it lacks aesthetic presentation. After implementing the following code snippet, this is how th ...

phphtmlcssemail

Instructions for turning an HTML table cell into an editable text box

Essentially, I'm looking to enable users to click on the table and edit the text within it. I found inspiration from this Js Fiddle: http://jsfiddle.net/ddd3nick/ExA3j/22/ Below is the code I've compiled based on the JS fiddle reference. I tho ...

javascriptjqueryhtmlhtml-table

The lobster custom font is malfunctioning in Internet Explorer

I am trying to use the unique font called lobster. After downloading the lobster.woff2 file, I stored it in the font folder. In my custom CSS, I added the following: @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 40 ...

htmlcssfonts