Если вы включите 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