Sağdan sola kaydırılsın mı?

Nasıl daraltılmış durumdan genişletilmiş (ve tam tersi) bir div gitmek olabilir, ama bunu sağdan sola nasıl yapabilirim?

Orada gördüğüm çoğu şey her zaman soldan sağa.

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

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

Bu, jQueryUI gizle / göster yöntemleri kullanılarak yerel olarak elde edilebilir. Örneğin.

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

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

Bunu kullan:

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

Canlı demo

Gelişmiş versiyon

Çift tıklamada çift kenar boşluğunu önlemek için demoya bazı kodlar eklendi: http://jsfiddle.net/XNnHC/942/

Hareket hızı ile kullanın;)

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

• Ekstra JavaScript kodları kaldırıldı.

• Sınıf adları ve bazı CSS kodları değişti

• Genişletilmiş veya daraltılmış olup olmadığını bulmak için özellik eklendi

• Hareket hızı efekti kullanıp kullanmadığı değişti

• Değişen animasyon hızı

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

JQuery UI kullanan Fiddle'daki bu çalışma örneğine bir göz atın . Başlangıçta soldan sağa kullandığım bir çözüm, ancak sağdan sola çalışacak şekilde değiştirdim.

Kullanıcının mevcut paneller arasındaki animasyonu bozmadan bağlantıları hızlı bir şekilde tıklamasını sağlar.

JavaScript kodu basittir:

$(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 bağlantısından HTML ve CSS edinin.

Daha iyi efekt sunumu için beyaz arka plan ve sol dolgu eklendi.

Bunu kullan

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

Bu şekilde yaptım:

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

Unutmayın, "btn" düğümü animasyondan önce gizlenmelidir ve buna "position: absolute" ayarını da yapmanız gerekebilir.

Bahsetmeye değer başka bir kütüphane animate.css . JQuery ile harika çalışıyor ve sadece CSS sınıflarını değiştirerek birçok ilginç animasyon yapabilirsiniz.

Sevmek..

$ ("# slide"). toggle (). toggleClass ('animated bounceInLeft');

GreenSock Animasyon Platformu (GSAP) ileTweenLite/ 'TweenMax jQuery veya CSS3 geçişleri çok daha büyük özelleştirme ile daha pürüzsüz geçişler sağlar. TweenLite / TweenMax ile CSS özelliklerini canlandırmak için "CSSPlugin" adlı eklentisine de ihtiyacınız olacak. TweenMax bunu otomatik olarak içerir.

İlk olarak, TweenMax kütüphanesini yükleyin:

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

Veya hafif sürüm olan 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>

Ardından, animasyonunuzu arayın:

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

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

Bir kimlik seçiciyle de arayabilirsiniz:

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

JQuery yüklüyse, belirli bir sınıfı içeren tüm öğeler gibi daha gelişmiş geniş seçiciler kullanabilirsiniz:

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

Tüm ayrıntılar için bakınız: TweenLite Belgeleri

Web sitelerine göre: "TweenLite, GreenSock Animasyon Platformunun (GSAP) temeli olarak hizmet eden son derece hızlı, hafif ve esnek bir animasyon aracıdır."

Önce öğenin genişliğini 0, sağa kayan ve sonra göstermek üzere olduğunuz olayda tanımlayabilirsiniz.

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

Bu kadar basit.

JQuery UI'sı olmadan , yalnızca jQuery ile sağdan sola animasyon örneği (herhangi bir sürüm, bkz. 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>

Buradaki örneği inceleyin.

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

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

ya da kullanabilirsiniz

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

Kaydı kullanarak yaptığım bir örnek (sadece HTML, CSS ve JS, sadece jquery kütüphanesi ile). Aşağı kaydırıldığında bir düğme sola kayar.

Ayrıca, istediğiniz tek şey bu efektse, jQuery UI kullanmayın, çünkü çok ağırdır (sadece bunun için kullanmak istiyorsanız).

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

Kontrol Bu örneği

Eğer divkesinlikle konumlandırılmışsa ve genişliği biliyorsanız, şunları kullanabilirsiniz:

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

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

Hangi ekran dışına kaydırır.

Alternatif olarak, bir kabı sarabilirsiniz 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);