слайд справа налево с помощью слайд-переключателя или анимации

-1

Мне удалось заставить мой код работать с использованием slideToggle в прошлом, когда мне нужно, чтобы меню соскальзывало сверху вниз. Но теперь мне нужно свернуть свое меню справа налево. Поэтому я решил принять подход .animate.слайд справа налево с помощью слайд-переключателя или анимации

Я попытался это, но он не работает в полной мере:

$(MENU_BUTTON).click(function() { 
     $(MENU_ID).animate({ width:'245' }, 600); 
    });

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

источник

2013-08-01 Smithy

скрипка пожалуйста ..... –

Вы должны установить ширину в 0 каждый раз перед началом анимации, если вы не хотите, чтобы она работала только один раз. – slash197

Итак, в первый раз, вы анимируете его слева направо, в следующий раз, вы анимируете его справа на право? Если я правильно понял, вы хотите, чтобы меню было скрыто, а затем, когда нажата кнопка, меню скользит видимым слева направо. При нажатии следующей кнопки она сдвигается назад, справа налево. Это именно то, что делает код, за исключением скрытия меню.

$(MENU_BUTTON).click(function() { 
    var right = $(MENU_ID).hasClass('right'); 
    $(MENU_ID).toggleClass('right'); 
    // If you would like to hide/show it too. 
    // Change the 0 to 0-$(MENU_ID).outerWidth(); 
    /* if (right) { 
     setTimeout(function() {$(MENU_ID).hide();}, 600); 
    } else $(MENU_ID).show(); */ 
    $(MENU_ID).animate({ width:(right?0:245) }, 600); 
});

источник

2013-08-01 15:18:43

К сожалению, такого рода работы. Возможно, я вас смутил. Он всегда должен быть справа налево. Чтобы он начинал скрываться и когда кнопка была нажата, слайды справа налево, а затем снова назад, когда кнопка снова нажимается. – Smithy

Возможно, мой английский не идеален, но я все же думаю, что кажется, что вы хотите, чтобы меню было скрытый, а затем, когда кнопка нажата, меню скользит видимым слева направо. При нажатии следующей кнопки она сдвигается назад, справа налево. Это именно то, что делает код, за исключением скрытия меню. Может быть, вы меня неправильно поняли, когда я сказал «слева направо налево ...»? –

Попробуйте fiddle

HTML

<div class="menu"> 
    <ul class="upper"> 
     <li><a href="" title="">Dynamic item 1</a> 

      <ul class="inner"> 
       <li> <a href="">Subitem 1 of 1</a> 

       </li> 
       <li> <a href="">Subitem 2 of 1</a> 

       </li> 
      </ul> 
     </li> 
     <li> <a href="">Static item</a> 

     </li> 
     <li><a href="">Dynamic item 2</a> 

      <ul class="inner"> 
       <li><a href="">Subitem 1 of 2</a> 

       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS

.menu { 
    width: 150px; 
    float: right; 
    position: relative; 
} 
.menu ul li { 
    margin-bottom: 1px; 
} 
.menu ul.upper li a { 
    width: 150px; 
    background-color: #000; 
    color: #FFF; 
    text-decoration: none; 
    display: block; 
    padding: 7px 10px; 
    text-align: left; 
    font-weight: bold; 
} 
.menu ul.inner { 
    position: absolute; 
    right: 160px; 
    z-index: 1000; 
    display: none; 
    width: 150px; 
    right: 170px; 
} 
.menu ul.inner li a { 
    width: 150px; 
    background-color: #3D6AA2; 
    color: #FFF; 
    text-decoration: none; 
    display: block; 
    padding: 7px 10px; 
    text-align: left; 
    font-weight: bold; 
}

$('.upper li').each(function() { 
    $(this).find('ul.inner').css({top: $(this).offset().top}) 
}); 

$('.upper li').hover(function() { 
    $(this).find('ul.inner').stop(true, true).animate({ 
     width: "toggle" 
    }, { 
     queue: false, 
     duration: 250 
    }); 
});

источник

2013-08-01 18:39:04

слайд справа налево с помощью слайд-переключателя или анимации

ответ

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