Як я можу діва перейти від згорнутого до розширеного (і навпаки), але зробити це справа наліво?
Більшість всього, що я бачу там, завжди зліва направо.
Як я можу діва перейти від згорнутого до розширеного (і навпаки), але зробити це справа наліво?
Більшість всього, що я бачу там, завжди зліва направо.
Відповіді:
$("#slide").animate({width:'toggle'},350);
Довідка: https://api.jquery.com/animate/
paddingLeft: 'toggle', paddingRight: 'toggle'
якщо елемент має внутрішню підкладку.
CSS
щоб виглядати як справжній слайд зліва
overflow: hidden
.
Цього можна досягти за допомогою методів jQueryUI сховати / показати. Напр.
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
Використовуй це:
$('#pollSlider-button').animate({"margin-right": '+=200'});
Поліпшена версія
Демонстраційний код був доданий до демонстрації, щоб запобігти подвійному маржі на подвійне клацання: http://jsfiddle.net/XNnHC/942/
Використовуйте його з полегшенням;)
http://jsfiddle.net/XNnHC/1591/
Видалені додаткові коди JavaScript.
Назви класів та деякі коди CSS змінено
Додана функція, щоб знайти, чи розгорнутий чи згорнутий
Змінено, використовуйте ефект послаблення чи ні
Змінена швидкість анімації
Погляньте на цей робочий приклад на 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.
Додано білий фон та ліву підкладку лише для кращого представлення ефекту.
Використовуй це
<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>
Я зробив це так:
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});
це все, що вам знадобиться, я вважаю.
Ще одна варта згадати бібліотека - animate.css . Він чудово працює з jQuery, і ви можете робити багато цікавих анімацій, просто перемикаючи класи CSS.
Подібно до..
$ ("# слайд"). toggle (). toggleClass ("анімований відмов InLeft");
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)".
Ви можете визначити спочатку ширину елемента як 0, плаваючу праворуч, а потім у випадку, коли ви збираєтесь його показати .. це було б як
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
Просто як це.
Приклад анімації справа наліво без інтерфейсу 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>
або ви можете використовувати
$('#myDiv').toggle("slide:right");
Приклад, зроблений мною за допомогою прокрутки (лише 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)'});
}
});
Перевірте цей приклад
Якщо ваш 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);