CODEWITHSUNDEEP
javascripthtmljquerycss
neves
neves

Reputation: 846

Add transition effect during element size turn, with .resizable().css

I tried to add a slowdown effect while returning the element to its original size with resizable.

The slowdown would only have to occur on the turn (when the "Click-me" button was pressed), never while handling the element with the mouse.

I tried add transition property in jQuery .css():

'transition': '1s ease-in-out'

My code is:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

    <style>
      .box {
        border: 2px solid #008cba;
        margin-top: 10px;
      }

    </style>

    <script>
      $(function() {
        $('.box').resizable();
        $('#btn').click(function() {
          $('.box').resizable().css({
            'width': 'auto',
            'heigth': 'auto',
            'transition': '1s ease-in-out'
          });
        });
      });

    </script>
  </head>

  <body>
    <button id='btn' type='button'>
      Click-me
    </button>
    <div class='box'>
      <h1 class='el1'>
        CSS transition element
      </h1>
    </div>
  </body>

</html>

I tried adding the 1 second slow effect when the element was getting back to its normal size.

Upvotes: 0

Views: 34

Answers (1)

sajjad rezaei
sajjad rezaei

Reputation: 1033

It’s not possible to do thing.animate({ "height": "auto" });.You essentially clone the element, remove the fixed heights currently inflicting the element, and measure/save the value. Then you animate the real element to that value.

As you are using jQuery You can use this function to animate it:

jQuery.fn.animateAuto = function(prop, speed, callback){
        var elem, height, width;
        return this.each(function(i, el){
            el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
            height = elem.css("height"),
            width = elem.css("width"),
            elem.remove();
            
            if(prop === "height")
                el.animate({"height":height}, speed, callback);
            else if(prop === "width")
                el.animate({"width":width}, speed, callback);  
            else if(prop === "both")
                el.animate({"width":width,"height":height}, speed, callback);
        });  
    }

Then use function as :

$(function() {
        $('.box').resizable();
        $('#btn').click(function() {
          
          $(".box").animateAuto("both", 1000); 
          
        
        });
      });

Upvotes: 1

Related Questions