События jQuery( анимация бургер меню)

284

12 ноября 2017, 16:49

Есть код, который плавно меняет значение свойства, нужно чтобы при втором нажатии на элемент значение менялось !!! вот моя попытка, но получеться что через две секунды пропадает меню

$('.icon').click(function(){
   $('.links').animate({
        opacity: '1'
}, 1000
);
});
$('.icon').click(function(){
   $('.links').animate({
        opacity: '0'
}, 1000
);
});

Answer 1

Нужно проверять текущее значения свойства и в зависимости от него устанавливать значение. Если opacity 0, то установить 1, если нет, то установить 0

$('.icon').click(function(){ 
  if($('.links').css('opacity') == '0'){ 
    $('.links').animate({ 
      opacity: '1' 
    }, 1000); 
  }else{ 
    $('.links').animate({ 
      opacity: '0' 
    }, 1000); 
  } 
});

.links{ 
  width: 200px; 
  height: 200px; 
  background: black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="icon">icon</div> 
<div class="links">links</div>