Переключить анимацию

У меня есть кнопка «Домой». При нажатии на нее появится «О программе» (анимация), а когда я снова нажму кнопку «Домой», «О программе» вернется назад. Я хочу создать анимацию переключения, проблема в том, что About отображается, но не возвращается.

Нужна ваша помощь.

JSFiddle

var main = function() {
  $('#hme').click(function() {
    if ($('#abt').css('left', '-60px'))
      $('#abt').animate({
        left: '200px'
      }, 300);
    else
      $('#abt').animate({
        left: '-60px'
      }, 300);
  });
}

$(document).ready(main);

$(document).ready(main);

#abt {
  position: absolute;
  left: -60px;
  top: 50px
}

#nav {
  background: rgba(0, 0, 0, 0.20);
}

#navLst {
  margin: 0 auto;
  text-align: center;
}

li {
  list-style-type: none;
  display: inline-block;
  -webkit-transition: color .5s;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
    </ul>
  </div>
</div>

Пожалуйста, прочтите Как спросить, особенно часть "Напишите заголовок, который резюмирует конкретную проблему".

— 05.03.2019 23:48

jquery html css

05.03.2019 23:40

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это потому, что вы устанавливаете значение css для #abt вместо того, чтобы проверять его. Попробуй это:

var main = function(){
  $('#hme').click(function(){
    var left = $('#abt').css('left');
    if (left == '-60px') {
        $('#abt').animate({left: '200px'},300 );
    } else {
        $('#abt').animate({left: '-60px'},300 );
    }

  });
}

Здорово! :) пожалуйста, дайте правильный ответ / голосуйте, если вы нашли решение.

— 06.03.2019 13:41

Я хотел проголосовать за оба, но как я могу проголосовать за оба ответа? Все они отличные решения!

— 06.03.2019 16:34

Вы можете использовать значки со стрелками вверх рядом с большим числом рядом с каждым ответом, чтобы проголосовать.

— 07.03.2019 15:39

05.03.2019 23:46

Ответ принят как подходящий

Используйте margin-left вместо left, как в приведенном ниже коде.

var main = function() {
      $('#hme').click(function(){
        if ($('#abt').css("margin-left") == "200px"){
        	  $('#abt').animate({"margin-left": '-=200'});
        }  
       else{
            $('#abt').animate({"margin-left": '+=200'}); 
       }
            
      });
}

$(document).ready(main);

#abt {
  position: absolute;
  left: -60px;
  top: 50px
}

#nav {
  background: rgba(0, 0, 0, 0.20);
}

#navLst {
  margin: 0 auto;
  text-align: center;
}

li {
  list-style-type: none;
  display: inline-block;
  -webkit-transition: color .5s;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='bckDrp'>
      <div id='nav'>
        <ul id='navLst'>
          <li class='navOp' id='hme'>Home</li>
          <li class='navOp' id='abt'>About</li>
        </ul>
      </div>
</div>

Привет, Амин! Большое спасибо за ваш вклад, который так хорошо работает! Не могли бы вы сообщить мне разницу между css("margin-left") == "200px") и css("margin-left", "200px")) в моем if statement? Пробовал css("margin-left", "200px")), не получилось, но css("margin-left") == "200px") работает сразу.

— 06.03.2019 03:58

if оператор waite имеет логическое значение if (bool), поэтому мы попытались проверить, является ли css("margin-left") == "200px") истинным или ложным, но это css("margin-left", "200px")) просто установило значение margin-left в 200px, надеюсь, вы меня поняли :)

— 06.03.2019 12:43

06.03.2019 00:29