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>
<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>
17
jquery right-to-left toggle

8 ответов

вы можете сделать это с помощью дополнительные эффекты в составе jQuery-ui

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

21

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

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

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

12

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

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

для того, чтобы clearQueue и jumpToEnd. читайте о jQuery остановитесь здесь

4

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

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

попробуй такое

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);
1
$("#mydiv").toggle(500,"swing");
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