использовать JQuery для переключения marginLeft?

0

У меня есть меню шириной 100%, тогда я проверяю ширину и отбрасываю ее с экрана на эту сумму. То, что я хотел бы достичь, - это эффект margin margin.

У меня есть это, что, очевидно, не возвращается. Я работаю в em.

    var em = $(window).width() / parseFloat($("body").css("font-size"));
    emEm = em+'em'; //change px to em and add em unit i.e. XXem

    $('nav').width(emEm); //makes nav full width in em's
    $('nav').css('margin-left','-'+emEm); //throws nav off screen

    $('.menu').click(function() {
        $('nav').animate({
            marginLeft: '0' //bring nav back on screen
        }, 300);
    });

Есть ли способ переключить функцию меню?

благодаря

Теги:

3 ответа

2
Лучший ответ

Просто выполните -100% и 0 соответственно:

http://jsfiddle.net/DerekL/5xrGu/

$('nav').animate({
    marginLeft: '-100%'
}, 300);
Поделиться
  • 0
    Это великолепно, спасибо! Это должен быть я, так как это нормально для вашей скрипки, но по какой-то причине первый щелчок ничего не делает, затем следующие щелчки выдвигаются и отлично. Скоро выложу код ...
  • 0
    Изменение позиции закрыто =! Закрыто, кажется, работает. Перемещено это до того, как оживить. Насколько я знаю, что на самом деле делает закрытый =! Закрытый?
Показать ещё 1 комментарий
0 
$('.menu').click(function() {
$('nav').toggle(function() {
$('nav').animate({marginLeft: "0"}, 300},
function() {
$('nav').animate({marginLeft: "100%"}, 300});
Поделиться
  • 0
    Спасибо за это, тумблер, кажется, заставляет меню скрывать, а также анимировать ...
  • 0
    Можете ли вы бросить все это вместе для меня в jfiddle с моим добавленным кодом, и я исправлю это для вас.
0

Отредактировано сообщение. Посмотри на это. Я знаю, что это можно сделать быстрее и короче, но пока это будет работать.

<script>
    var clicked = false,
        margin_value;

    $('#on-click-id').click(function(){
        $('nav').stop(); //Stop the animation on each click
        if(clicked == false){
            margin_value = '+=10px';
            //Set clicked to true so the next click will be decreasing the margin
            clicked == true;
        } else if (clicked == false){
            margin_value = '-=10px';
            //Set clicked to false so the next click will be increasing the margin
            clicked = false;
        }

        $('nav').animate({
            marginLeft: margin_value //bring nav back on screen
        }, 300);
    })
</script>
Поделиться
  • 0
    не совсем - он скользит наружу, но и прячется. Если бы был способ остановить это, это было бы здорово

Ещё вопросы

Сообщество Overcoder
Наверх
Меню