slideToggle jQuery справа наліво

Я новачок в JQ У мене є цей скрипт, який я знайшов в інтернеті, і це робити саме те, що мені потрібно але я хочу, щоб ковзання було справа наліво як я можу це зробити? будь ласка, допоможіть

це код

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>
</head>

<body>

<div class="slidingDiv">
Fill this space with really interesting content. hide</div>
Show/hide
16
Я додав відповідь, будь ласка, подивіться.
додано Автор ta-run, джерело

8 Відповіді

You can do this using additional effects as a part of jQuery-ui

$('.show_hide').click(function() {
    $(".slidingDiv").toggle("slide");
});

Тестовий зв'язок

21
додано
додано Автор Spokey, джерело
Це, в поєднанні з варіантом напрямку, є найкращою відповіддю.
додано Автор Emile Bergeron, джерело

Спробуйте це:

$(this).hide("slide", { direction: "left" }, 1000);

$ (this) .show ("slide", {direction: "left"}, 1000);

12
додано
Або ви можете прочитати цей чудовий підручник: learnjquery.com/2009/ 02/& hellip;
додано Автор Aldi Unanto, джерело
Для цього потрібен інтерфейс користувача jQuery
додано Автор Rune Vejen Petersen, джерело

Будь ласка, спробуйте цей код

$(this).animate({'width': 'toggle'});
4
додано
Цей код нічого не робить, якщо ви не використовуєте інтерфейс користувача jQuery. Всі параметри за замовчуванням, які ви отримали, є "повільним" та "швидким"
додано Автор Ryan Coolwebs, джерело
Більш того, цей код викине синтаксичну помилку, оскільки параметри animate повинні передаватися як об'єкт (у вас відсутній () ).
додано Автор vard, джерело
Це буде кращою відповіддю, якщо вона включатиме пояснення разом із кодом.
додано Автор John Hascall, джерело

Я знаю, що минуло рік з моменту запитання, але для людей, які збираються відвідати цю сторінку, я розміщую своє рішення.

Використовуючи те, що запропонував @Aldi Unanto, це більш повна відповідь:

  jQuery('.show_hide').click(function(e) {
    e.preventDefault();
    if (jQuery('.slidingDiv').is(":visible") ) {
      jQuery('.slidingDiv').stop(true,true).hide("slide", { direction: "left" }, 200);
    } else {
      jQuery('.slidingDiv').stop(true,true).show("slide", { direction: "left" }, 200);
    }
  });

Спочатку я не дозволяю посиланням робити що-небудь на клацанні. Потім я додаю чек, якщо елемент є видимий чи ні. Коли я бачу, я ховаю його. Приховано, я показую це. Ви можете змінити напрямок вліво або вправо та тривалість від 200 мс до всього, що вам подобається.

Редагувати: Я також додав

.stop(true,true)

in order to clearQueue and jumpToEnd. Read about jQuery stop here

4
додано
$("#mydiv").toggle(500,"swing");
1
додано
Дякуємо за цей фрагмент коду, який може надати деяку обмежену, негайну допомогу. належне пояснення значно підвищить його довгострокову цінність, показуючи, чому це є гарним рішенням проблеми та зробить це більш корисні для майбутніх читачів з іншими подібними питаннями. відредагуйте свою відповідь, щоб додати пояснення, включаючи припущення, які ви зробили. посилання
додано Автор user8371915, джерело
будь-ласка, додайте більше опису
додано Автор Alex Filatov, джерело

Спробуйте це

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);
1
додано

включити плагіни jQuery і jQuery UI і спробувати це

 $("#LeftSidePane").toggle('slide','left',400);
0
додано

Я б запропонував вам скористатися нижченаведеним css

.showhideoverlay { 
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  position: fixed;
  background: #000;
  opacity: 0.75;
}

Потім ви можете використовувати просту функцію перемикання:

$('a.open').click(function() {
  $('div.showhideoverlay').toggle("slow");
});

Це дозволить відобразити меню оверлею справа наліво. Крім того, ви можете використовувати позиціювання для зміни ефекту зверху або знизу, тобто замість bottom: 0; замість top: 0; - ви побачите меню, що рухається з правого боку - нижній кут.

0
додано