Przesuń od prawej do lewej?

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.

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

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

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

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/

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.

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>

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

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

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

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)”.

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.

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>

Sprawdź przykład tutaj.

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/

lub możesz użyć

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

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

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