SlideToggle JQuery справа налево

Я новичок в JQ У меня есть этот script, который я нашел в Интернете, и он делает именно то, что мне нужно но я хочу, чтобы скользящий будет справа налево как мне это сделать? пожалуйста, помогите

это код

<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>
<style>

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}
</style>
</head>

<body>

<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
<a href="#" class="show_hide">Show/hide</a>

Ответ 1

Вы можете сделать это, используя дополнительные эффекты как часть jQuery-ui

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

тестовая ссылка

Ответ 2

Попробуйте следующее:

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

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

Ответ 3

Пожалуйста, попробуйте этот код

$(this).animate({'width': 'toggle'});

Ответ 4

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

Используя то, что предложил @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)

для очистки Queue и jumpToEnd. Читайте о jQuery, остановитесь здесь

Ответ 5

$("#mydiv").toggle(500,"swing");

more https://api.jquery.com/toggle/

Ответ 6

Попробуйте это

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);

Ответ 7

Я предлагаю вам использовать приведенный ниже 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; - вы увидите меню, скользящее из правого нижнего угла.

Ответ 8

включить JQuery и JQuery UI-плагины и попробовать это

 $("#LeftSidePane").toggle('slide','left',400);