Issue with prolonged CSS transition duration affecting width and position changes

Question

Issue with prolonged CSS transition duration affecting width and position changes

Suppose we need a transition for width and position.

However, using a long duration can result in unexpected behavior. The timing function will reset from zero for the remainder of the operation.

    #test {
      border: solid 1px;
      width: 100px;
      height: 50px;
      transition: width 10s linear;
    }
    #test:hover {
      width: 1000px;
      transition: width 10s linear;
    }

<div id="test"></div>

If you rehover the div at any point during the transition, it will take 10s to transition over 500px, not the original settings. Additionally, it will take 10s for the last 10px.

Is there any workaround for this issue or should I consider using the jQuery animate function?

html css google-chrome transition

Answer 1

Answer №1

Here's a workaround that involves writing a script for the animation process. In essence, you need to calculate the time needed to complete the remaining width.

This function can be applied to any element and you can also specify the desired width as an input parameter.

$("#demo").on("mouseover", function(){
  var $elem = $(this);  
  var remainingTime = 10000 - $elem.width()*10; // Calculating remaining time for animation

  $elem.stop().animate({"width": "1000px"}, remainingTime, "linear");
});

$("#demo").on("mouseout", function(){
  var $elem = $(this);
  var remainingTime = $elem.width()*10; // Calculating remaining time for animation
  
  $elem.stop().animate({"width": "100px"}, remainingTime, "linear");
});

#demo {
  border: solid 1px;
  width: 100px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="demo"></div>

Answer 2

Here's a workaround that involves writing a script for the animation process. In essence, you need to calculate the time needed to complete the remaining width.

This function can be applied to any element and you can also specify the desired width as an input parameter.

$("#demo").on("mouseover", function(){
  var $elem = $(this);  
  var remainingTime = 10000 - $elem.width()*10; // Calculating remaining time for animation

  $elem.stop().animate({"width": "1000px"}, remainingTime, "linear");
});

$("#demo").on("mouseout", function(){
  var $elem = $(this);
  var remainingTime = $elem.width()*10; // Calculating remaining time for animation
  
  $elem.stop().animate({"width": "100px"}, remainingTime, "linear");
});

#demo {
  border: solid 1px;
  width: 100px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="demo"></div>

Issue with prolonged CSS transition duration affecting width and position changes

Answer №1

Similar questions

What is the best way to zip two arrays of different lengths so that they can be looped through in a Django

difficulty with displaying the following image using jquery

Javascript event fails to trigger following completion of Ajax request

Transforming the jQuery mobile application navbar into an Android apk menu

Prevent selecting the same option in Laravel after it has been chosen once

Extract each line of text from the ul li tags at every level of the hierarchy with the help of

Parsing a Table in Python with HTMLParser

Reorganize items that extend beyond the list into the next column using Bootstrap

Jquery JavaScript functions are compatible with Chrome and Firefox browsers but do not function properly in Internet Explorer

Creating iPhone style form elements using HTML

Error encountered in ASP.NET Core MVC due to dependency inversion with CRUD operations

What is the best way to align the navigation list to the right in Bootstrap v4alpha6?

A Guide to Retrieving the First Child Element's Text with Jquery and a Class Selector

Retrieve custom attributes of child elements using jQuery selectors

Retrieve information from ngResource and then connect the output to the display

What is the best way to locate the text within a <div><span>text</span></div> tag using Beautiful Soup?

What's the best way to align a bottom navigation bar in the center?

Updating the color of text when clicking on a link using javascript

Fluid layout causing elements in body to be hidden by fixed header

Discover the best way to enable lint support for MUI `sx` prop values