오른쪽에서 왼쪽으로 슬라이드 하시겠습니까?

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 를 사용하는 Fiddle 에서이 작업 예제 를 살펴보십시오 . 원래 왼쪽에서 오른쪽으로 사용한 솔루션이지만 오른쪽에서 왼쪽으로 작동하도록 변경했습니다.

사용 가능한 패널간에 애니메이션을 중단하지 않고도 링크를 빠르게 클릭 할 수 있습니다.

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

Fiddle 링크에서 HTML 및 CSS를 가져옵니다.

더 나은 효과 표현을 위해 흰색 배경과 왼쪽 여백을 추가했습니다.

이것을 사용하십시오

<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 ( 'animated bounceInLeft');

GreenSock 애니메이션 플랫폼 (GSAP) 와 함께TweenLite/TweenMaxjQuery를 또는 CSS3 전환보다 훨씬 더 큰 사용자 정의 훨씬 부드러운 전환을 제공합니다. TweenLite / TweenMax를 사용하여 CSS 속성에 애니메이션을 적용하려면 "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는 GSAP (GreenSock Animation Platform)의 기반이되는 매우 빠르고 가볍고 유연한 애니메이션 도구입니다."

먼저 요소의 너비를 0으로 정의하고 오른쪽으로 부동 한 다음 표시하려고하는 이벤트에서 정의 할 수 있습니다.

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

그렇게 간단합니다.

jQuery를 사용하는 jQuery UI없이 오른쪽에서 왼쪽으로 움직이는 애니메이션의 예 (모든 버전은 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");

스크롤을 사용하여 수행 한 예 (jquery 라이브러리와 함께 HTML, CSS 및 JS 만). 아래로 스크롤하면 버튼이 왼쪽으로 미끄러집니다.

또한 원하는 유일한 효과 가이 효과라면 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);