Как в документации PHP говорится:
Деструктор будет вызываться, даже если выполнение сценария прекращается с помощью
exit()
. Вызовexit()
в деструкторе будет препятствовать выполнению оставшихся процедур завершения.
$("#slide").animate({width:'toggle'},350);
Ссылка: https://api.jquery.com/animate/
. Если ваш 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);
Пример, сделанный мной с использованием прокрутки (только 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)'});
}
});
Отметьте этот пример
Пример анимации справа налево без 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>
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('.yourclass').toggle("slide", {direction: "right"}, 1000);
});
});
Используйте это
<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>
Взгляните на этот рабочий пример для Fiddle, в котором используется 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;
});
});
Получить HTML и CSS по ссылке Fiddle.
Добавлены белый фон и отступы слева для лучшего представления эффекта.
Другая заслуживающая упоминания библиотека - это animate.css . Он отлично работает с jQuery, и вы можете делать много интересных анимаций, просто переключая класс CSS.
Как ..
$ ("# slide"). Toggle (). ToggleClass ('animated bounceInLeft');
Используйте это:
$('#pollSlider-button').animate({"margin-right": '+=200'});
Улучшенная версия
Некоторый код был добавлен в демонстрация, чтобы предотвратить двойное поле при двойном щелчке: http://jsfiddle.net/XNnHC/942/
Используйте его с замедлением;)
http : //jsfiddle.net/XNnHC/1591/
Удалены лишние коды JavaScript.
Имена классов и amp; некоторые CSS-коды изменены
Добавлена функция поиска, если развернуто или свернуто
Изменено, используется ли эффект замедления или нет
Изменена скорость анимации
Этого можно достичь с помощью методов скрытия / показа jQueryUI. Например.
// To slide something leftwards into view,
// with a delay of 1000 msec
$("div").click(function () {
$(this).show("slide", { direction: "left" }, 1000);
});
Я сделал это следующим образом:
var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});
Обратите внимание, что узел "btn" должен быть скрыт перед анимацией, и вам также может потребоваться установить для него "position: absolute".
Вы можете определить сначала ширину элемента как 0, плавающее вправо, а затем в случае, когда вы собираетесь его показать ... это будет похоже на
$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);
Просто так.
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 Animation Platform (GSAP)».
или можно использовать
$('#myDiv').toggle("slide:right");