Это моя первая попытка написать js для управления элементом DOM, который не смог «сдвинуть» этот элемент навигации HTML5 с левого края экрана мобильного телефона и из него.
Я был бы признателен за помощь, чтобы заставить его работать и немного доработать. Спасибо

$ ("заголовок .ui-btn-left"). Click (function () {
   var left = $ ("навигация"). offset (). left;
   var width = $ ("навигация"). width ();
   if (left == 0) {
      // $ ("nav"). css ({"left": -width});
      $ ("навигация"). css ({переход: левая ширина 0,3 секунды легкость});
   } еще {
      $ ("nav"). css ({"left": 0});
   }
});
nav {
   ширина: 80%;
   положение: фиксированное;
   цвет фона: белый;
   слева: 0;
   верх: 2em;
}
 <тело>

      
Меню

Мое приложение

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

<основной> Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum. Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum.Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Concequat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

->

Fred J.

Источник
Ответов: 2

Ответы (2)

Свойство перехода CSS не принимает фактическое значение свойства CSS, например left 30px. Также вы не указали значение свойства перехода, поэтому на вашей консоли действительно должна быть синтаксическая ошибка.

$("nav").css({transition: 'left 0.3s ease'});
$("nav").css({"left": -width});

Также вы можете просто поместить свойство перехода в свою таблицу стилей CSS, если не планируете изменять его на другой параметр.

jQuery ("кнопка"). Click (function () {
   var left = $ ("навигация"). offset (). left;
   var width = $ ("навигация"). width ();
   if (left == 0) {
      $ ("nav"). css ({"left": -width});
   } еще {
      $ ("nav"). css ({"left": 0});
   }
});
nav {
  положение: фиксированное;
  слева: -300 пикселей;
  верх: 0px;
  ширина: 300 пикселей;
  переход: влево с легкостью 0,3 с;
}
кнопка {
  положение: фиксированное;
  внизу: 0px;
}


Решение

вы можете использовать max-width: и animate ()

в css

nav{
   max-width : 0px;
}

в js

$("header .ui-btn-left").click(function() {
   var Width = $("nav").outerWidth();
   if (Width == 0) {
      $("nav").animate({"max-width": "1000px"} , 1000);
   } else {
      $("nav").animate({"max-width": "0px"} , 1000);
   }
});

Простая демонстрация