เลื่อนไปทางขวาไปทางซ้าย

ฉันจะให้ div ไปจากยุบไปเป็นขยาย (และในทางกลับกัน) แต่ทำจากขวาไปซ้ายได้อย่างไร

ทุกสิ่งที่ฉันเห็นส่วนใหญ่จะอยู่ซ้ายไปขวาเสมอ

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

การอ้างอิง: https://api.jquery.com/animate/

นี้สามารถทำได้โดยกำเนิดโดยใช้ซ่อน jQueryUI / แสดงวิธีการ เช่น.

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

อ้างอิง: http://docs.jquery.com/UI/Effects/Slide

ใช้สิ่งนี้:

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

การสาธิตสด

รุ่นที่ปรับปรุงแล้ว

มีการเพิ่มรหัสบางส่วนในการสาธิตเพื่อป้องกันไม่ให้มีการเพิ่มมาร์จินคู่เมื่อดับเบิลคลิก: http://jsfiddle.net/XNnHC/942/

ใช้กับการผ่อนคลาย;)

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

• ลบรหัส JavaScript พิเศษออกแล้ว

• ชื่อคลาสและรหัส CSS บางอย่างเปลี่ยนไป

• เพิ่มคุณสมบัติเพื่อค้นหาว่ามีการขยายหรือยุบ

• เปลี่ยนว่าจะใช้เอฟเฟกต์ผ่อนคลายหรือไม่

• เปลี่ยนความเร็วของภาพเคลื่อนไหวแล้ว

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

ลองดูที่ตัวอย่างการทำงานนี้ในซอซึ่งใช้jQuery UI มันเป็นวิธีการแก้ปัญหาที่ฉันใช้มาจากซ้ายไปขวา แต่ฉันเปลี่ยนเป็นทำงานจากขวาไปซ้าย

ช่วยให้ผู้ใช้คลิกที่ลิงค์ได้อย่างรวดเร็วโดยไม่ทำลายภาพเคลื่อนไหวระหว่างแผงควบคุม

รหัส JavaScript นั้นง่าย:

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

รับ HTML และ CSS ที่ลิงค์ Fiddle

เพิ่มพื้นหลังสีขาวและการขยายด้านซ้ายเพื่อการนำเสนอผลที่ดีกว่า

ใช้สิ่งนี้

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

ฉันทำแบบนี้แล้ว:

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

โปรดทราบว่าโหนด "btn" นั้นควรถูกซ่อนไว้ก่อนที่จะเคลื่อนไหวและคุณอาจต้องตั้งค่า "position: absolute" ไว้ที่มัน

ห้องสมุดมูลค่าการกล่าวขวัญก็คือanimate.css มันใช้งานได้ดีกับ jQuery และคุณสามารถทำแอนิเมชั่นที่น่าสนใจได้ง่ายๆเพียงแค่สลับคลาส CSS

ชอบ..

$ ("# slide"). toggle (). toggleClass ('เคลื่อนไหว bounceInLeft');

GreenSock Animation Platform (GSAP)พร้อมTweenLite/TweenMaxให้การเปลี่ยนภาพที่นุ่มนวลกว่าด้วยการปรับแต่งที่ดีกว่าการเปลี่ยน jQuery หรือ CSS3 ในการทำให้คุณสมบัติ CSS เคลื่อนไหวด้วย TweenLite / TweenMax คุณจะต้องมีปลั๊กอินที่เรียกว่า "CSSPlugin" TweenMax รวมถึงสิ่งนี้โดยอัตโนมัติ

ก่อนอื่นโหลดไลบรารี TweenMax:

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

หรือรุ่นน้ำหนักเบา 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>

จากนั้นโทรภาพเคลื่อนไหวของคุณ:

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

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

นอกจากนี้คุณยังสามารถโทรหาด้วยตัวเลือก ID:

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

หากคุณโหลด jQuery คุณสามารถใช้ตัวเลือกแบบกว้างขั้นสูงเพิ่มเติมเช่นองค์ประกอบทั้งหมดที่มีคลาสเฉพาะ:

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

สำหรับรายละเอียดทั้งหมดดู: เอกสาร TweenLite

ตามเว็บไซต์ของพวกเขา: "TweenLite เป็นเครื่องมือแอนิเมชั่นที่รวดเร็วน้ำหนักเบาและยืดหยุ่นสูงซึ่งทำหน้าที่เป็นรากฐานของ GreenSock Animation Platform (GSAP)"

คุณสามารถกำหนดความกว้างขององค์ประกอบก่อนเป็น 0 ลอยไปทางขวาและจากนั้นในเหตุการณ์ที่คุณกำลังจะแสดงมัน .. มันจะเป็นเหมือน

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

เรียบง่ายเหมือนที่

ตัวอย่างของภาพเคลื่อนไหวจากขวาไปซ้ายโดยไม่มี jQuery UIเพียงใช้ jQuery (ทุกรุ่นให้ดูที่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'});

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

หรือคุณสามารถใช้

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

ตัวอย่างที่ฉันทำโดยใช้การเลื่อน (แค่ HTML, CSS และ JS เพียงกับไลบรารี jquery) เมื่อเลื่อนลงปุ่มจะเลื่อนไปทางซ้าย

นอกจากนี้ฉันขอแนะนำให้คุณถ้าสิ่งเดียวที่คุณต้องการคือเอฟเฟกต์นี้อย่าใช้ jQuery UI เพราะมันหนักเกินไป (ถ้าคุณแค่ต้องการใช้มันเพื่อสิ่งนั้น)

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

ตรวจสอบตัวอย่างนี้

หากคุณdivอยู่ในตำแหน่งที่แน่นอนและคุณทราบความกว้างคุณสามารถใช้:

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

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

ซึ่งจะเลื่อนออกจากหน้าจอ

อีกวิธีหนึ่งคือคุณสามารถห่อมันภาชนะ 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);