Przesuń od prawej do lewej?


390

Jak mogę zmienić div z zwiniętego na rozwinięty (i odwrotnie), ale zrobić to od prawej do lewej?

Większość wszystkiego, co tam widzę, jest zawsze od lewej do prawej.




Odpowiedzi:


378
$("#slide").animate({width:'toggle'},350);

Odniesienie: https://api.jquery.com/animate/


Możesz także dodać, paddingLeft: 'toggle', paddingRight: 'toggle'gdy element ma wewnętrzne wypełnienie.
piotr_cz

17
Działa dobrze, tylko przesuwa się od lewej do prawej, gdy próbuję. Czy to możliwe, aby animować na odwrót?
twan

2
Jedyny problem polega na tym, że jeśli zawartość jest w środku, „zgniata” ją poziomo, powodując poruszanie się elementów sterujących / zmienianie rozmiaru / zawijanie itp. Czy istnieje na to dobre rozwiązanie?
Neil Barnwell

1
Twój kod potrzebuje więcej, CSSaby wyglądać jak prawdziwy slajd w lewo
AmerllicA

1
@ NeilBarnwell, jeśli możesz, umieść zawartość w opakowaniu o stałej szerokości i przechowuj pojemnik overflow: hidden.
Ben Philipp

239

Można to osiągnąć natywnie za pomocą metod ukrywania / pokazywania jQueryUI. Na przykład.

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

Odniesienie: http://docs.jquery.com/UI/Effects/Slide


141
@ekerner - wymaga JQueryUI, który jest ogromną biblioteką. Jeśli wszystko, czego chcesz, to proste przejście między slajdami, prawdopodobnie nie jest to odpowiedź;)
Jesse

9
Jest to najlepszy sposób, jeśli masz jQueryUI zainstalowany.
steampowered

5
Dla wyjaśnienia - plik min ma rozmiar co najmniej 235 KB !! To dobrze, ale znacznie doda do twojej strony, jak wskazuje
@Jesse

1
Używając niestandardowego konstruktora i usuwając wszystko oprócz animacji slajdów, można uzyskać zminimalizowany plik JS poniżej 20 KB.
Skylar Ittner

Chciałbym, aby dokumenty interfejsu użytkownika JQuery zawierały takie przykłady. Dzięki
andreszs,

76

Użyj tego:

$('#pollSlider-button').animate({"margin-right": '+=200'});

Demo na żywo

Poprawiona wersja

Dodano część kodu do wersji demonstracyjnej, aby zapobiec podwójnemu marginesowi przy podwójnym kliknięciu: http://jsfiddle.net/XNnHC/942/

Używaj go z łatwością;)

http://jsfiddle.net/XNnHC/1591/

  • Usunięto dodatkowe kody JavaScript.

  • Nazwy klas i niektóre kody CSS zostały zmienione

  • Dodano funkcję sprawdzania, czy jest rozwinięta czy zwinięta

  • Zmieniono, czy użyć efektu łagodzenia, czy nie

  • Zmieniono prędkość animacji

http://jsfiddle.net/XNnHC/1808/


2
Oblicza wartości w „px”, więc niewykonalne dla „%”
Faisal Ashfaq

przesuwa się w lewo przy każdym kliknięciu.
Elyor,

Możesz sprawdzić szerokość zewnętrzną i użyć tego, aby dodać prawy margines
Tofandel,

22

Spójrz na ten działający przykład na Fiddle, który używa interfejsu użytkownika jQuery . Jest to rozwiązanie, z którego korzystałem pierwotnie od lewej do prawej, ale zmieniłem je, aby działało od prawej do lewej.

Umożliwia użytkownikowi szybkie klikanie łączy bez przerywania animacji wśród dostępnych paneli.

Kod JavaScript jest prosty:

$(document).ready(function(){
    // Mostra e nascondi view-news
    var active = "europa-view";
    $('a.view-list-item').click(function () {
        var divname= this.name;
        $("#"+active ).hide("slide", { direction: "right" }, 1200);
        $("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
        active = divname;
    });
});

Uzyskaj HTML i CSS pod linkiem Fiddle.

Dodano białe tło i lewe dopełnienie dla lepszej prezentacji efektu.


8
wymaga interfejsu użytkownika jQuery
Jeroen K,

Tak. Jest to wskazane w podanym przykładowym łączu [ jsfiddle.net/erwinjulius/az4JL/]
Erwin Julius

19

Użyj tego

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function () {
            $("#left_panel").toggle("slide", { direction: "left" }, 1000);
        });
    });
</script>

7
Tak, potrzebujesz interfejsu jQuery dla rozszerzonych opcji łagodzenia
zanderwar

10
$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});

11
Jestem za komentarzami, ale ten kod jest dość zrozumiały.
Jon

7

Zrobiłem to w ten sposób:

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

Zauważ, że ten węzeł „btn” powinien być ukryty przed animacją i może być konieczne ustawienie dla niego „position: absolut”.


Dlaczego nie użyć width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});wierzę, że to wszystko, czego potrzebujesz.
Aart den Braber

6

Inną wartą wspomnienia biblioteką jest animate.css . Działa świetnie z jQuery i możesz zrobić wiele ciekawych animacji, po prostu przełączając klasy CSS.

Lubić..

$ ("# slide"). toggle (). toggleClass ('animated bounceInLeft');


5

Platforma animacji GreenSock (GSAP) zTweenLite/TweenMaxzapewnia znacznie płynniejsze przejścia z dużo większą personalizacją niż przejścia jQuery lub CSS3. Aby animować właściwości CSS za pomocą TweenLite / TweenMax, potrzebujesz również ich wtyczki o nazwie „CSSPlugin”. TweenMax uwzględnia to automatycznie.

Najpierw załaduj bibliotekę TweenMax:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

Lub lekka wersja, TweenLite:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

Następnie wywołaj animację:

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

Możesz także zadzwonić za pomocą selektora ID:

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

Jeśli masz załadowany jQuery, możesz użyć bardziej zaawansowanych selektorów szerokich, takich jak wszystkie elementy zawierające określoną klasę:

 // This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

Aby uzyskać szczegółowe informacje, zobacz: Dokumentacja TweenLite

Według ich strony internetowej: „TweenLite to niezwykle szybkie, lekkie i elastyczne narzędzie do animacji, które służy jako podstawa platformy animacji GreenSock (GSAP)”.


4

Możesz zdefiniować najpierw szerokość elementu jako 0, zmiennoprzecinkową w prawo, a następnie w przypadku zdarzenia, które zamierzasz pokazać. To byłoby jak

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

Proste.


4

Przykład animacji od prawej do lewej bez interfejsu użytkownika jQuery , tylko z jQuery (dowolna wersja, patrz https://api.jquery.com/animate/ ).

$(document).ready(function() {
  var contentLastMarginLeft = 0;
  $(".wrap").click(function() {
    var box = $(".content");
    var newValue = contentLastMarginLeft;
    contentLastMarginLeft = box.css("margin-left");
    box.animate({
      "margin-left": newValue
    }, 500);
  });
});
.wrap {
  background-color: #999;
  width: 200px;
  overflow: hidden;
}
.content {
  width: 100%;
  margin-left: 100%;
  background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  click here
  <div class="content">
    I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
  </div>
</div>



3

lub możesz użyć

$('#myDiv').toggle("slide:right");

4
Odpowiadając na dziesięcioletnie pytanie czternastoma innymi istniejącymi odpowiedziami, pomogłoby wyjaśnić, jakie nowe podejście przynosi twoja odpowiedź, i czy byłoby to ważne, gdy pytanie zostało zadane, lub czy wykorzystuje techniki, które stały się dostępne w ciągu tych dziesięciu lat .
Jason Aller

1

Przykład zrobiony przeze mnie przy użyciu przewijania (tylko HTML, CSS i JS, tylko z biblioteką jquery). Po przewinięciu w dół przycisk przesunie się w lewo.

Sugeruję również, jeśli jedynym efektem, który chcesz uzyskać, jest ten efekt, nie używaj interfejsu użytkownika jQuery, ponieważ jest on zbyt ciężki (jeśli po prostu chcesz go do tego użyć).

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
          event.preventDefault();
          $(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
      } else {
          $(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
      }
  });

Sprawdź ten przykład


1
Tak, przejścia CSS są obecnie najlepszym sposobem na osiągnięcie tego.
Tom Tom

1

Jeśli twój divjest absolutnie ustawiony i znasz szerokość, możesz po prostu użyć:

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

Który zsunie go z ekranu.

Alternatywnie możesz owinąć go pojemnikiem div

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.