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

Test Link

21
қосылды
қосылды автор Spokey, көзі
Бұл бағыт нұсқасымен бірге ең жақсы жауап.
қосылды автор Emile Bergeron, көзі

Мынаны көріңіз:

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

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

12
қосылды
Немесе сіз осы тамаша оқулықты оқи аласыз: learningjquery.com/2009/ 02/& hellip;
қосылды автор Aldi Unanto, көзі
Бұл jQuery UI талап етеді
қосылды автор Rune Vejen Petersen, көзі

Бұл кодты қолданып көріңіз

$(this).animate({'width': 'toggle'});
4
қосылды
JQuery UI пайдаланбасаңыз, бұл код ешнәрсе жасамайды. Барлық әдепкі параметрлері 'баяу' және 'жылдам'
қосылды автор 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
қосылды
Бұл кодтың үзіндісі үшін рахмет, ол кейбір шектеулі, дереу көмек беруі мүмкін. дұрыс түсіндірме оның ұзақ мерзімді құндылығын айтарлықтай жақсартады, мұның себебі неге бұл мәселені жақсы шешу және оны болашақ оқырмандарға басқа да, ұқсас мәселелермен де пайдалы. Кейбір түсіндірмелерді, соның ішінде жасаған болжамдарыңызды қосу үшін түзету . ref
қосылды автор 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");
});

Бұл оң жақтағы сол жақтан қосымша мәзірді көрсетеді. Сондай-ақ, әсерді жоғарғы немесе төменгі деңгейден өзгертуге арналған орналасуды қолдануға болады, яғни top: 0; орнына bottom: 0; пайдаланыңыз - оң жақтан сырғанау мәзірін көресіз - бұрыштық бұрыш.

0
қосылды