Переключение анимации влево без добавления отображения: отсутствует

#jquery #animation #toggle

#jquery #Анимация #переключение

Вопрос:

Я пытаюсь создать анимированное скользящее навигационное меню, в котором подменю выдвигается с помощью переключателя анимации для атрибута ‘left’.

Мне успешно удалось заставить атрибут left переключаться между начальной настройкой -360px, где div скрыт, и атрибутом 0, где он расширен, но когда атрибут left переключается на 0, он также добавляет display: none.

Я думаю, что должно быть довольно простое решение, но пока я не смог его найти

Вот страница, на которой это реализовано

И вот функция Jquery:

http://alexpeake.info/index

 $(document).ready(function(){
  $("#gallerytoggle").click(function(){
    $("#travelling_info").animate({left:'toggle'},"slow");
  });

})

1. Можете ли вы также описать, почему вы не хотите использовать display: none; ?

2. Также дважды щелкните по стрелке. Это портит ваш макет. Я бы тоже подумал об исправлении этого.

3. Я не хочу отображать none, потому что функциональность, которую я хочу, заключается в том, чтобы div просто выдвигался, чтобы открыть подменю, а затем снова вставлялся при повторном нажатии, а не выдвигался и исчезал.

Ответ №1:

Вы могли бы сделать это вручную. Не уверен, что это оптимально, но это мой наивный способ сделать это:

 var state = 1;

$(document).ready(function(){
  $("#gallerytoggle").click(function(){
    $("#travelling_info").animate({left: parseInt((state % 2 - 1) * (-360))   'px'}, "slow");
    state  ;
  });    
});

1. Когда я попробовал это, div переместился дальше влево и просто чередовался между этой третьей позицией и второй, а не между исходной и второй

2. исправлено с небольшим изменением в вашем коде, спасибо — 360 должно было быть 360