Animating the change in height

Question

Animating the change in height

In my case, the code snippet below modifies the size of my navbar as I scroll down and back up: The original height is 15vh while the smaller navbar height is set to 8vh

$(document).ready(function($){
    var nav = $('nav');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 13.35) {
            nav.addClass("smallnav");
        } else if($(this).scrollTop() > 0) {
            nav.removeClass("smallnav");
        }
    });
});

Currently, the transition from small to big or vice versa happens instantly. How can I introduce an animation effect so that it smoothly shrinks or expands?

jquery css

Answer 1

Answer №1

To enhance the smooth transition of height change, consider incorporating the following code:

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;

Demo

$(document).ready(function($) {
  var nav = $('nav');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 13.35) {
      nav.addClass("smallnav");
    } else if ($(this).scrollTop() >= 0) {
      nav.removeClass("smallnav");
    }
  });
});

nav {
  height: 15vh;
  border: 1px solid black;
  position: fixed;
  top: 0;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.smallnav {
  height: 8vh;
}

body {
  height: 200vh
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>your nav </nav>

Answer 2

To enhance the smooth transition of height change, consider incorporating the following code:

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;

Demo

$(document).ready(function($) {
  var nav = $('nav');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 13.35) {
      nav.addClass("smallnav");
    } else if ($(this).scrollTop() >= 0) {
      nav.removeClass("smallnav");
    }
  });
});

nav {
  height: 15vh;
  border: 1px solid black;
  position: fixed;
  top: 0;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.smallnav {
  height: 8vh;
}

body {
  height: 200vh
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>your nav </nav>

Answer 3

Answer №2

Embed this snippet into your navigation stylesheet

  -webkit-transition: height 1s; 
  -moz-transition: height 1s; 
  -ms-transition: height 1s; 
  -o-transition: height 1s; 
  transition: height 1s;

This code will create a smooth height transition lasting for 1 second.

To learn more, visit this link.

Answer 4

Embed this snippet into your navigation stylesheet

  -webkit-transition: height 1s; 
  -moz-transition: height 1s; 
  -ms-transition: height 1s; 
  -o-transition: height 1s; 
  transition: height 1s;

This code will create a smooth height transition lasting for 1 second.

To learn more, visit this link.

Animating the change in height

Answer №1

Answer №2

Similar questions

The icon for the weather on openweathermap is currently not displaying

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

Preserve the original color of links in CSS by using the `a

Transmitting a sequence of JSON information from php to JavaScript,

What is the proper method for utilizing the .done or .complete functions in conjunction with .toggle in jQuery?

Tips for invoking a custom function in jQuery with a delay when hovering

How to grab selected HTML content with jQuery

JS/JQuery: Retrieve value from dropdown list or input field

Unpredictable Instances of JQuery AJAX Failing to Execute

Limit jQuery to selecting only one list item (li) element

What is the most effective way to eliminate error messages from the email format checker code?

JavaScript - Delayed Text Appearance with Smooth Start

Requesting a resource using the HTTP GET method returned no data

I seem to have misplaced the plot here, but can someone explain why this tiny snippet of JavaScript isn't functioning properly?

Unsure how to proceed with resolving lint errors that are causing changes in the code

Using Javascript to parse a json file that contains additional content at the beginning

What's the best way to customize the color of the text "labels" in the Form components of a basic React JS module?

Implementing jQuery Validation Plugin for Form Fields including Textarea

Obtaining the textarea value from LineControl Editor in an MVC Controller: A Step-by-Step Guide

Is there a way to change this from webkit to moz?