Слайд справа налево?

Question

Как я могу разделить div с развалом на расширенный (и наоборот), но делать это справа налево?

Большинство всего, что я вижу, всегда слева направо.

Answer 1

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

Ссылка: https://api.jquery.com/animate/

Answer 2

Это может быть достигнуто естественным образом с помощью методов скрыть/показать 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

Answer 3

Я сделал это так:

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

Обратите внимание, что узел «БТН» должны быть скрыты до того анимации, и вы, возможно, потребуется установить " позиция: абсолютная ".

Answer 4

Используйте это:

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

Live demo

Улучшенная версия

Некоторый код был добавлен в демке, чтобы предотвратить двойной запас по двойному щелчку: http://jsfiddle.net/XNnHC/942/

использования с облегчением;)

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

• Дополнительные коды JavaScript удалены.

• Имен классов & некоторые коды CSS изменили

особенности

• Добавлен найти, если развернутые или свернутый

• Изменен ли использование ослабления эффекта или не

• Измененной скорость анимации

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

Answer 5

Слишком просто:

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

Answer 6

Посмотрите на this working example на Скрипке, который использует 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; 
    }); 
}); 

Get HTML и CSS в Скрипки ссылке.

Добавлен белый фон и левое заполнение только для лучшего представления эффекта.

Answer 7

Вы можете определить первую ширину элемента как 0, плавучие вправо, а затем на том случае, если вы собираетесь показать его .. это было бы как

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

просто.

Answer 8

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 Documentation

Согласно их веб-сайту: «TweenLite - чрезвычайно быстрый, легкий и гибкий инструмент анимации, который служит основой платформы анимации GreenSock (GSAP)».

Answer 9

Пример справа налево анимации без 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>

Answer 10

Проверьте пример.

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

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

Answer 11

Еще стоит упомянуть библиотека animate.css. Он отлично работает с jQuery, и вы можете делать много интересных анимаций, просто переключая классы CSS.

Как ..

$ ("# слайд") переключения() toggleClass ('анимированные bounceInLeft')..;

Answer 12

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

Answer 13

Пример сделано мной, используя свиток (только 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)'}); 
     } 
    }); 

Проверить this example