Search code examples
javascripthtmlcssscrolleasing

Smooth effect for my code

I've got this code:

$(window).scroll(function () {
    if( $(window).width() < 924) {
    if ($(window).scrollTop() >= 100) {
        $('#normal_menu').css({
            height: '50px'
        })

        $('#logo img').css({
            height: '50px',
            width: '50px',
            top: '0',
            left: '15px' 
        });


    } else {
        $('#normal_menu').css({
            height: '120px'
        })

        $('#logo img').css({
            height: '80px',
            width: '80px',
            top: '20px',
            left: '0px' 
        });
    }
    }
});

It is working fine. But now I want it to go smooth (ease). How do I edit this code so it wil go smooth?

Solution

  • You should add the transition property to the required elements:

    #normal_menu,#logo img {
  transition: all .5s ease-in-out;
}