Trượt phải sang trái?

Làm thế nào tôi có thể có một div đi từ thu gọn sang mở rộng (và ngược lại), nhưng làm như vậy từ phải sang trái?

Hầu hết mọi thứ tôi thấy ngoài kia luôn luôn từ trái sang phải.

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

Tham khảo: https://api.jquery.com/animate/

Điều này có thể đạt được một cách tự nhiên bằng cách sử dụng các phương thức ẩn / hiển thị jQueryUI. Ví dụ.

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

Tham khảo: http://docs.jquery.com/UI/Effects/Slide

Dùng cái này:

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

Bản thử trực tiếp

Phiên bản cải tiến

Một số mã đã được thêm vào bản demo, để ngăn chặn lợi nhuận kép khi nhấp đúp: http://jsfiddle.net/XNnHC/942/

Sử dụng nó với nới lỏng;)

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

• Mã JavaScript bổ sung đã bị xóa.

• Tên lớp và một số mã CSS đã thay đổi

• Đã thêm tính năng để tìm nếu được mở rộng hoặc thu gọn

• Thay đổi có sử dụng hiệu quả nới lỏng hay không

• Thay đổi tốc độ hoạt hình

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

Hãy xem ví dụ hoạt động này trên Fiddle, sử dụng giao diện người dùng jQuery . Đó là một giải pháp tôi đã sử dụng ban đầu từ trái sang phải, nhưng tôi đã thay đổi nó để hoạt động từ phải sang trái.

Nó cho phép người dùng nhấp vào liên kết một cách nhanh chóng mà không phá vỡ hình ảnh động giữa các bảng có sẵn.

Mã JavaScript rất đơn giản:

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

Nhận HTML và CSS tại liên kết Fiddle.

Đã thêm nền trắng và đệm trái chỉ để trình bày hiệu ứng tốt hơn.

Dùng cái này

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

Tôi đã làm theo cách này:

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

Lưu ý, nút "btn" đó phải được ẩn trước khi hoạt ảnh và bạn cũng có thể cần đặt "vị trí: tuyệt đối" cho nó.

Một thư viện đáng nói khác là animate.css . Nó hoạt động rất tốt với jQuery và bạn có thể thực hiện nhiều hoạt ảnh thú vị chỉ bằng cách bật các lớp CSS.

Giống..

$ ("# slide"). toggle (). toggleClass ('hoạt hình nảyInLeft');

Nền tảng hoạt hình GreenSock (GSAP) vớiTweenLite/TweenMaxcung cấp các chuyển tiếp mượt mà hơn với khả năng tùy biến lớn hơn nhiều so với các chuyển đổi jQuery hoặc CSS3. Để tạo hiệu ứng các thuộc tính CSS bằng TweenLite / TweenMax, bạn cũng sẽ cần plugin của họ có tên là "CSSPlugin". TweenMax bao gồm điều này tự động.

Đầu tiên, tải thư viện TweenMax:

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

Hoặc phiên bản nhẹ, 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>

Sau đó, gọi hoạt hình của bạn:

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

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

Bạn cũng có thể gọi nó bằng bộ chọn ID:

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

Nếu bạn đã tải jQuery, bạn có thể sử dụng các bộ chọn rộng nâng cao hơn, như tất cả các phần tử có chứa một lớp cụ thể:

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

Để biết chi tiết đầy đủ, xem: Tài liệu TweenLite

Theo trang web của họ: "TweenLite là một công cụ hoạt hình cực kỳ nhanh, nhẹ và linh hoạt, đóng vai trò là nền tảng của Nền tảng hoạt hình GreenSock (GSAP)."

Trước tiên, bạn có thể xác định chiều rộng của phần tử là 0, nổi bên phải, và sau đó vào sự kiện mà bạn sắp hiển thị .. nó sẽ giống như

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

Đơn giản như thế.

Một ví dụ về hoạt hình từ phải sang trái mà không có Giao diện người dùng jQuery , chỉ với jQuery (bất kỳ phiên bản nào, xem 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>

Kiểm tra ví dụ ở đây.

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

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

hoặc bạn có thể sử dụng

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

Một ví dụ được tôi thực hiện bằng cách sử dụng cuộn (chỉ HTML, CSS và JS, chỉ với thư viện jquery). Khi cuộn xuống một nút sẽ trượt sang trái.

Ngoài ra, tôi đề nghị bạn nếu điều duy nhất bạn muốn là hiệu ứng này, đừng sử dụng Giao diện người dùng jQuery vì nó quá nặng (nếu bạn chỉ muốn sử dụng nó cho việc đó).

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

Kiểm tra ví dụ này

Nếu divvị trí của bạn được định vị tuyệt đối và bạn biết chiều rộng, bạn chỉ có thể sử dụng:

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

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

Mà sẽ trượt nó ra khỏi màn hình.

Ngoài ra, bạn có thể bọc nó một container 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);