Переключение анимации или добавление класса?

Я занимаюсь созданием небольшого выдвижного меню. У меня проблемы, потому что теперь я понимаю, что .animate() не работает.Переключение анимации или добавление класса?

Так что я планировал создать класс CSS и вместо этого использовать .cssToggle(), но это не анимация.

Каков правильный способ сделать что-то вроде этого toggleable, чтобы снова закрыть меню, используя тот же значок?

$(".menu span").click(function() { 
$(".menu").animate({ 
    left:0 
    }, 500, function() { 
    }) 
})

Адрес JSFiddle.

источник

2014-09-09 user1486133

вы можете создать собственный аниматор, используя setInterval(). вам нужно увеличить левую часть div с интервалом до максимальной и тихой визы. – KyawLay

вот моя обновленная версия [jsfiddle link] (http://jsfiddle.net/jk1j6c4k/6/) вы можете настроить скорость ofanimation с значениями увеличения/уменьшения и интервала таймера – KyawLay

Вы можете проверить с помощью функции .css ("left") 'в левой позиции вашего элемента. Когда его «0» вы установите значение переменной для «xx» пикселей, а когда оно «xx», то u установит переменную для значения «0».

источник

2014-09-09 09:51:34 danielg44k

Вы действительно протестировали это?Если бы вы это сделали, вы бы поняли, что он ничего не делает по отношению к тому, чего я пытаюсь достичь, и на самом деле ломается, чем то, что у меня есть сейчас. – user1486133

Вы можете скрыть меню, когда его ушел влево и не видно, а при нажатии на него, если его видимым или нет еще раз проверить, а затем выполнить соответствующие действия:

$(".menu span").click(function() { 

var menu = $('.menu'); 

if($(menu).is(':visible')){ 
$(menu).animate({ 
    left:0 
    }, 500, function() { 
     $(menu).hide(); 
    }) 
}else{ 


$(menu).show(function(){ 
    $(menu).animate({left:200},500); 

}) 


});

Я не проверял код, но я предполагаю, что логика должна работать ..

источник

2014-09-09 09:54:36

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

FIDDLE

$(".menu span").click(function() { 
    var th = $('.menu'); 
     if ($(th).css('left') !== '0px') { 
      $(th).animate({ 
       "left": "0" 
      }, 500); 
     } else { 
      $(th).animate({ 
       "left": "-95%" 
      }, 500); 
     } 
});

источник

2014-09-09 10:03:35 Richa

Я исправил это сам в конце, используя переход CSS3. Вместо этого я использовал .toggleClass() и добавил transition:1s; для обоих стилей CSS, которые влияют на размещение меню div. Это означает, что при щелчке класс добавляется или удаляется, а переходы означают, что он анимируется должным образом.

$(".menu span").click(function() { 
    $(".menu").toggleClass('open'); 
}); 

.menu{position:absolute;left:-95%;height:100%;transition: 1s;} 
.open{left:0; transition: 1s;}

JSFiddle here.

источник

2014-09-09 10:07:26 user1486133

В зависимости от вашей целевой аудитории я бы не полагался на javaScript, но css для таких простых анимаций. Просто переключить класс по меню, например, так:

$(".menu span").click(function() { 
    $(".menu").toggleClass('open'); 
})

И чем делать все волшебство в CSS:

body { 
    margin: 0; 
    background-color: #bada55; 
} 
.main { 
    padding: 20px; 
} 
.menu { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: pink; 
    /* Move the menu off screen, adjust if you want that menu bar to be visible at all times */ 
    transform: translate(-100%, 0); 
    transition: transform 0.5s; 
} 
.menu span { 
    position: absolute; 
    display: inline-block; 
    top: 0; 
    left: 100%; 
    background: white; 
    width: 20px; 
    height: 20px; 
} 
.menu.open { 
    transform: translate(0, 0); /* Move the menu to the desired place */ 
} 
.menu.open span { 
    /* Reposition the toggle element */ 
    right: 0; 
    left: auto; 
}

Смотрите пример на codepen.

Я использую transform: translate(-100%, 0); и transform: translate(-100%, 0);, потому что он работает лучше, но вы можете использовать position, а также получить поддержку для старых браузеров (они не получат переход, хотя).

Для получения информации о поддержке браузера см. caniuse.

источник

2014-09-09 12:35:37

Переключение анимации или добавление класса?

ответ

Смежные вопросы