Van rechts naar links schuiven?

Hoe kan ik een div van samengevouwen naar uitgevouwen (en vice versa) laten gaan, maar van rechts naar links?

Bijna alles wat ik daar zie, is altijd van links naar rechts.

Antwoord 1, autoriteit 100%

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

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

Antwoord 2, autoriteit 63%

Dit kan native worden bereikt met behulp van de jQueryUI hide/show-methoden.
Bijv.

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

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

Antwoord 3, autoriteit 20%

Gebruik dit:

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

Live-demo

Verbeterde versie

Er is wat code aan de demo toegevoegd om dubbele marge bij dubbelklikken te voorkomen: http://jsfiddle. net/XNnHC/942/

Gebruik het met gemak 😉

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

• Extra JavaScript-codes verwijderd.

• Klassenamen & enkele CSS-codes gewijzigd

• Functie toegevoegd om te zien of deze is uitgevouwen of ingeklapt

• Gewijzigd of het versoepelingseffect wel of niet wordt gebruikt

• Gewijzigde animatiesnelheid

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

Antwoord 4, autoriteit 6%

Bekijk dit werkvoorbeeldop Fiddle, dat gebruikmaakt van jQuery-gebruikersinterface.
Het is een oplossing die ik oorspronkelijk van links naar rechts heb gebruikt, maar ik heb het veranderd om van rechts naar links te werken.

Hiermee kan de gebruiker snel op links klikken zonder de animatie tussen de beschikbare panelen te onderbreken.

De JavaScript-code is eenvoudig:

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

Haal HTML en CSS op via de Fiddle-link.

Witte achtergrond en linkerpad toegevoegd voor een betere presentatie van effecten.

Antwoord 5, autoriteit 5%

Gebruik dit

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

Antwoord 6, autoriteit 3%

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

Antwoord 7, autoriteit 2%

Ik heb het op deze manier gedaan:

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

Houd er rekening mee dat het knooppunt “btn” vóór de animatie verborgen moet zijn, en mogelijk moet u er ook “positie: absoluut” op instellen.

Antwoord 8, autoriteit 2%

Een andere vermeldenswaardige bibliotheek is animate.css. Het werkt geweldig met jQuery en je kunt veel interessante animaties maken door simpelweg te schakelen tussen CSS-klassen.

Vind ik leuk..

$(“#slide”).toggle().toggleClass(‘animated bounceInLeft’);

Antwoord 9, autoriteit 2%

of je kunt

. gebruiken

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

Antwoord 10

GreenSock Animation Platform (GSAP) met TweenLite/ TweenMaxbiedt veel soepelere overgangen met veel meer maatwerk dan jQuery- of CSS3-overgangen. Om CSS-eigenschappen te animeren met TweenLite / TweenMax, heb je ook hun plug-in nodig met de naam “CSSPlugin”. TweenMax voegt dit automatisch toe.

Laad eerst de TweenMax-bibliotheek:

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

Of de lichtgewicht versie, 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>

Bel vervolgens uw animatie:

var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

U kunt het ook bellen met een ID-selector:

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

Als u jQuery hebt geladen, kunt u meer geavanceerde brede selectors gebruiken, zoals alle elementen met een specifieke klasse:

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

Zie voor volledige details:
tweenlite-documentatie

Volgens hun website:
“Tweenlite is een extreem snelle, lichtgewicht en flexibele animatietool die dient als de basis van het GreenSock-animatieplatform (GSAP).”

Antwoord 11

U kunt eerst de breedte van het element definiëren als 0, goed zweven, en vervolgens op het punt dat u het wilt laten zien .. het is als

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

Zo simpel is het.

Antwoord 12

Een voorbeeld van een animatie van rechts naar links zonder jQuery UI, alleen met jQuery (elke versie, zie 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>

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

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

#myDiv{
position:absolute;
left: 0;
width: 200px;
}
$('#myDiv').animate({left:'-200'},1000);

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

var menuOpen = false
var init = () => {
    $(".menu__toggle, .menu__blackout").on("click", menuToggle)
}
var menuToggle = () => {
    console.log("Menu:Toggle");
    $(".menu__blackout").fadeToggle();
    if(menuOpen) { // close menu
        $(".menu__collapse").css({
            left: "-80vw",
            right: "100vw"
        });
    } else { // open menu
        $(".menu__collapse").css({
            left: "0",
            right: "20vw"
        });
    }
    menuOpen = !menuOpen;
}
$(document).ready(init);

.menu__toggle {
    position: absolute;
    right: 0;
    z-index: 1;
}
.menu__blackout {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.menu__collapse {
  position: absolute;
  top: 0;
  right: 100vw;
  bottom: 0;
  left: -80vw;
  background: white;
  -webkit-transition: ease-in-out all 1s;
  transition: ease-in-out all 1s;
  z-index: 11;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu__toggle">Toggle menu</button>
<menu class="menu">
  <div class="menu__blackout"></div>
  <div class="menu__collapse">
    <ul class="list">
      <li class="list__item">
        <a class="list__item__link" href="#section1">Menu Item 1</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section2">Menu Item 2</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section3">Menu Item 3</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section4">Menu Item 4</a>
      </li>
      <li class="list__item">
        <a class="list__item__link" href="#section5">Menu Item 5</a>
      </li>
    </ul>
  </div>
</menu>