jQuery hide () анимация слайд справа

Используя функцию hide() jQuery с дополнительным параметром длительности, я могу получить некоторые windows предупреждений на моем сайте, чтобы изящно сместиться с экрана и исчезнуть.

Похоже, что направление по умолчанию для анимации hide остается слева, хотя это поведение не определено на странице определения hide() .

Мне нужно иметь возможность сделать так, чтобы ящики сдвигались вправо или вверх.

Не менее важно, если это поведение не определено, я обеспокоен тем, что разные браузеры могут визуализировать анимацию по-разному. Поэтому я также хочу зафиксировать последовательность.

Где определено поведение слайда? Какой самый простой способ переключиться на слайд вправо или вверх?

 $(document).ready(function() { $("#close-alert-box-urgent").click(function() { $("#alert-box-urgent").hide(1000); }); $("#close-alert-box-news").click(function() { $("#alert-box-news").hide('fast'); }); }); 
 .alert-box { width: 50vw; position: relative; margin: 20px auto; border: 1px solid black; } .alert-box-close { position: absolute; top: -12px; right: -12px; cursor: pointer; } 
   

Tuition Alert

text text text text text text text text text text text text text text

Latest News

text text text text text text text text text text text text text text

https://jsfiddle.net/n0zpev0v/

Если вы включите jQueryUI, вы можете использовать их метод hide, который позволит вам указать направление.

jQueryUI

 hide("slide", {direction: "right"}, 1000); 

JSFiddle

Можно ли использовать метод jQuery .animate() , как .animate() ниже.

 $(document).ready(function() { $("#close-alert-box-urgent").click(function() { $("#alert-box-urgent").animate({ 'margin-left' : "50%", 'opacity' : '0', },500); }); $("#close-alert-box-news").click(function() { $("#alert-box-news").animate({ 'margin-top' : "-50%", 'opacity' : '0' },500);; }); }); 
 body{ overflow-x:hidden; } .alert-box { width: 50vw; position: relative; margin: 20px auto; border: 1px solid black; display:block; } .alert-box-close { position: absolute; top: -12px; right: -12px; cursor: pointer; } 
  

Tuition Alert

text text text text text text text text text text text text text text text text text text

Latest News

text text text text text text text text text text text text text text text text text text

В этом ответе я просто хочу указать и прояснить эту строку:

Похоже, что направление по умолчанию для анимации hide – слайд слева

Эта анимация не имеет «направления», она просто анимирует сам элемент по отношению к фактическому поведению элемента элемента и соответствует тому, как растет элемент. Свойства для анимированных размеров:

 Width // Height 

Поскольку нормальный элемент растет из их верхней левой точки, поэтому вы видите, что он идет влево.


Если вы измените поведение поля, например, с помощью float вы увидите другое поведение.

Демо-версия Jsfiddle

Вы можете использовать аналогичный метод для метода animate.css .

Вы бы создали fn.extend следующим образом:

 $.fn.extend({ animateAlert: function(animationName, speed, isForwards) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).css("animation-duration", speed + "ms"); if (!isForwards) { this.one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); } } }); 

Вы можете настроить его, как вам нравится, в этом примере мы добавим имя animationName которое будет являться @keyframe и classом в вашем файле CSS.

Например:

 .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } 

Затем speed которая будет в миллисекундах, и isForwards как логическая, имитирующая значение forwards animation-fill-mode forwards .


CODE SNIPPET:

 $.fn.extend({ animateAlert: function(animationName, speed, isForwards) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).css("animation-duration", speed + "ms"); if (!isForwards) { this.one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); } } }); $(document).ready(function() { $("#close-alert-box-urgent").on("click", function() { $("#alert-box-urgent").animateAlert('slideOutUp', 6000); }); $("#close-alert-box-news").on("click", function() { $("#alert-box-news").animateAlert('slideOutUp', 500, true); }); }); 
 .alert-box { width: 50vw; position: relative; margin: 20px auto; border: 1px solid black; } .alert-box-close { position: absolute; top: -12px; right: -12px; cursor: pointer; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } 
  

Tuition Alert

text text text text text text text text text text text text text text text text text text

Latest News

text text text text text text text text text text text text text text text text text text