Просуньте направо наліво?


390

Як я можу діва перейти від згорнутого до розширеного (і навпаки), але зробити це справа наліво?

Більшість всього, що я бачу там, завжди зліва направо.



4
наприклад, jsfiddle.net/DcWS2/10
Стано

Відповіді:


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

Довідка: https://api.jquery.com/animate/


Ви також можете додати, paddingLeft: 'toggle', paddingRight: 'toggle'якщо елемент має внутрішню підкладку.
piotr_cz

17
Працює чудово, лише вона ковзає зліва направо, коли я спробую. Чи можна змусити його оживити навпаки?
twan

2
Єдина біда полягає в тому, що якщо вміст знаходиться всередині, він "стискає" його по горизонталі, викликаючи переміщення / розмір / обгортання елементів керування тощо. Чи є хороше рішення для цього?
Ніл Барнвелл

1
Ваш код потрібно більше, CSSщоб виглядати як справжній слайд зліва
AmerllicA

1
@NeilBarnwell, якщо можете, покладіть вміст у обгортку фіксованої ширини і поставте контейнер overflow: hidden.
Бен Філіп

239

Цього можна досягти за допомогою методів 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


141
@ekerner - для цього потрібна JQueryUI, яка є масовою бібліотекою. Якщо все, що ви хочете, - це простий слайд, це, мабуть, не відповідь;)
Джессі

9
Це найкращий спосіб, якщо у вас встановлений jQueryUI.
підключений парою

5
Для уточнення - мінімальний файл становить щонайменше 235kb !! Це добре, але це значно додасть вашу сторінку, як вказує
@Jesse

1
Використовуючи користувальницький конструктор і видаляючи все, крім слайдів, можна отримати мінімізований JS менше 20 КБ.
Skylar Ittner

Я б хотів, щоб у документів JQuery UI були такі приклади. Дякую
andreszs

76

Використовуй це:

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

Демонстраційна демонстрація

Поліпшена версія

Демонстраційний код був доданий до демонстрації, щоб запобігти подвійному маржі на подвійне клацання: http://jsfiddle.net/XNnHC/942/

Використовуйте його з полегшенням;)

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

  • Видалені додаткові коди JavaScript.

  • Назви класів та деякі коди CSS змінено

  • Додана функція, щоб знайти, чи розгорнутий чи згорнутий

  • Змінено, використовуйте ефект послаблення чи ні

  • Змінена швидкість анімації

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


2
Обчислює значення у 'px', тому не здійсненні для '%'
Faisal Ashfaq

вона рухається ліворуч на кожному клацанні.
Еліор

Ви можете перевірити зовнішню ширину і скористатися нею, щоб додати правильний запас
Tofandel

22

Погляньте на цей робочий приклад на Fiddle, який використовує інтерфейс jQuery . Це рішення, яке я використовував спочатку зліва направо, але я змінив його на роботу справа наліво.

Це дозволяє користувачеві швидко натискати на посилання, не порушуючи анімацію серед доступних панелей.

Код 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.

Додано білий фон та ліву підкладку лише для кращого представлення ефекту.


8
потрібен інтерфейс jQuery
Jeroen K

Так. Це вказується на прикладі приведеного посилання [ jsfiddle.net/erwinjulius/az4JL/]
Ервін Юлій


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

11
Я все для коментарів, але цей код досить зрозумілий.
Джон

7

Я зробив це так:

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

Зауважте, що вузол "btn" повинен бути прихований перед анімацією, і вам може знадобитися встановити "позицію: абсолютну" для нього.


Чому б не використовувати width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});це все, що вам знадобиться, я вважаю.
Aart den Braber

6

Ще одна варта згадати бібліотека - animate.css . Він чудово працює з jQuery, і ви можете робити багато цікавих анімацій, просто перемикаючи класи CSS.

Подібно до..

$ ("# слайд"). toggle (). toggleClass ("анімований відмов InLeft");


5

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

Ви також можете зателефонувати за допомогою селектора ідентифікаторів:

 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 (GSAP)".


4

Ви можете визначити спочатку ширину елемента як 0, плаваючу праворуч, а потім у випадку, коли ви збираєтесь його показати .. це було б як

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

Просто як це.


4

Приклад анімації справа наліво без інтерфейсу jQuery , просто з 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>



3

або ви можете використовувати

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

4
Відповідаючи на десятирічне запитання з чотирнадцятьма іншими існуючими відповідями, це допоможе пояснити, який новий підхід приносить ваша відповідь, і якщо він би був дійсним, коли запитання було задано, або якщо він використовує методи, які стали доступними протягом цих десяти років .
Джейсон Аллер

1

Приклад, зроблений мною за допомогою прокрутки (лише 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)'});
      }
  });

Перевірте цей приклад


1
Так, переходи CSS є одними з найкращих способів досягти цього в наші дні.
Том Том

1

Якщо ваш 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);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.