slideToggle JQuery prawej do lewej

Jestem nowy w JQ mam ten skrypt znalazłem w internecie i jej robić dokładnie to, co muszę, ale chcę przesuwnych będzie od prawej do lewej jak to zrobić to? pomóżslideToggle JQuery prawej do lewej

jest to kod

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

Źródło

2013-06-24 benjo

Dodałem odpowiedź, proszę spojrzeć. –

Można to zrobić za pomocą additional effects as a part of jQuery-ui

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

Test Link

Źródło

2013-06-24 08:48:18

[możesz również ustawić dla niego 'direction: 'right''] (http://jsfiddle.net/Spokey/qEjXj/5 /) – Spokey

To, w połączeniu z opcją kierunku, jest najlepszą odpowiedzią. –

Spróbuj tego:

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

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

Źródło

2013-06-24 08:45:59

Lub możesz przeczytać ten świetny samouczek: http: //www.learningjquery.com/2009/02/slide-elements-in-different-directions –

Wymaga to jQuery UI –

Wiem, że minął rok od tego pytania, ale tylko dla osób, które zamierzają odwiedzić tę stronę, zamieszczam moje rozwiązanie.

Korzystając co @Aldi Unanto zasugerował tu jest pełniejsza odpowiedź:

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); 
    } 
    });

Najpierw zapobiec link od robienia czegokolwiek na kliknięcia. Następnie dodaję czek, jeśli element jest widoczny, czy nie. Gdy jest widoczny, ukrywam go. Po ukryciu pokazuję to. Możesz zmienić kierunek na lewy lub prawy i czas trwania z 200 ms na dowolne.

Edit: Dodałem także

.stop(true,true)

w celu clearQueue i jumpToEnd. Read about jQuery stop here

Źródło

2014-12-09 08:48:42 Spyros

Spróbuj ten kod

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

Źródło

2014-12-18 07:09:54 w3debugger

Ten kod nic nie robi, chyba że używasz interfejsu użytkownika jQuery. Wszystkie domyślne opcje, które masz, to "wolno" i "szybko". –

Ponadto kod ten spowoduje błąd składni, ponieważ parametry "animate" powinny zostać przekazane jako obiekt (brakuje ci '{}'). – vard

To byłaby lepsza odpowiedź, gdyby zawierała wyjaśnienie wraz z kodem. –

obejmują jQuery i jQuery UI wtyczek i spróbować

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

Źródło

2016-04-30 10:46:41 Anbarasan

Spróbuj

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

Źródło

2016-11-16 09:07:41 Souvik

Proponuję użyć poniżej css

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

Następnie można skorzystać z prostej funkcji przełączania:

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

To spowoduje wyświetlenie menu nakładki od prawej do lewej. Alternatywnie można użyć pozycjonowania do zmiany efektu z góry lub dołu, tj. Użyć bottom: 0; zamiast top: 0; - zobaczysz menu przesuwające się z prawego dolnego rogu.

Źródło

2017-02-24 12:42:33

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

Źródło

2018-01-16 16:25:02 AlexanderPop

proszę dodać więcej opisów –

Dziękujemy za ten fragment kodu, który może zapewnić ograniczoną, natychmiastową pomoc. A [odpowiednie wyjaśnienie] (https://meta.stackexchange.com/q/114762) znacznie poprawiłoby jego długoterminową wartość, pokazując, dlaczego jest to dobre rozwiązanie problemu i czyniłoby go bardziej przydatnym dla przyszłych czytelników z innymi podobne pytania. Proszę [edytuj] (https://meta.stackoverflow.com/posts/360251/edit) swoją odpowiedź, aby dodać wyjaśnienia, w tym założenia, które podjąłeś. [ref] (https://meta.stackoverflow.com/a/360251/8371915) – user8371915

slideToggle JQuery prawej do lewej

Odpowiedz

Powiązane problemy