jQuery: add css() and fadeToggle

Question

I know, very noob question: I got this code on a Wordpress website and it works properly

jQuery('.hamburger').click(function() {
jQuery('.menu-container').fadeToggle( "0.3s", "swing" ),
});

How can I add to this script css() method? I've tried something like that, but it doesn't work:

    jQuery('.hamburger').click(function() {
    jQuery('.menu-container').fadeToggle( "0.3s", "swing" );
    jQuery(".bar2").css({"display":"none");
    jQuery(".bar").css({"width":"40px","margin-bottom":"-2px");
    jQuery(".bar1").css({"transform":"rotate(45deg)");
    jQuery(".bar1").css({"transform":"rotate(-45deg)");

});

What's the proper way to achieve my goal?

Answer 1

The way you are using .css() is wrong. you should use either .css(property, value) or .css({property1: value1, property2: value2})

I created a snippet for you here.

jQuery('.hamburger').click(function() {
jQuery('.menu-container').fadeToggle( "0.3s", "swing" );
jQuery(".bar2").css("display","none");
jQuery(".bar").css({"width":"40px","margin-bottom":"-2px"});
jQuery(".bar1").css("transform","rotate(45deg)");
jQuery(".bar1").css("transform","rotate(-45deg)");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class=hamburger>Click me</button>
<div class=menu-container>Menu Container</div>
<div class=bar>Bar</div>
<div class=bar1>Bar1</div>
<div class=bar2>Bar2</div>

BTW, I don't know why you are rotating bar1 twice. But, I used your code anyway.