jQuery: добавить css () и fadeToggle

Question

Я знаю, очень нубский вопрос: я получил этот код на веб-сайте Wordpress, и он работает нормально

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

Как я могу добавить в этот метод сценария css ()? Я пробовал что-то подобное, но это не работает:

    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)");

});

Как правильно достичь моей цели?

Answer 1

То, как вы используете .css(), неверно. Вы должны использовать .css(property, value) или .css({property1: value1, property2: value2})

Я создал фрагмент для вас здесь.

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>

Кстати, я не знаю, почему вы вращаете bar1 дважды. Но я все равно использовал твой код.

Answer 2

Правильный способ использования .css в jquery

$("p").css("color", "red");

Работа

$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color", "blue");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This will turn to blue when button is clicked</p>
<button>Click Me</button>

фрагмент ниже,