Jquery slideUp 和 slideDown animation 不適用於模態

Question

我有一些用於顯示模式的 jquery 代碼。 它既簡單又干凈。 但事實上，它只與 jquery fadeIn 和 fadeOut animation 一起使用。slideUp 和 slideDown animation 不起作用。 我不知道為什么。 請看看我的代碼。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
.toast-container {
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
}
[class*="toast-pos-"] {
  position: absolute;
  padding: 10px;
}
.toast-pos-top {
  top: 0;
}
.toast-pos-right {
  right: 0;
}
.toast-pos-bottom {
  bottom: 0;
}
.toast-pos-left {
  left: 0;
}
.toast {
  display: none;
  padding: 20px;
  margin: 20px 0;
  background: #eeeeee;
  color: #333333;
}
.close-toast {
  float: right;
  text-decoration: none;
  color: #ffffff;
  vertical-align: middle;
}
/* Aditional Styles */
body {
  padding: 60px 40px;
  background: #42A5F5;
  font-family: sans-serif;
}
.toast-trigger {
  color: #ffffff;  
}
.toast {
  background: rgba(255,255,255,.5);
  color: #FFFFFF;
}
.toast-trigger {
  display: inline-block;
  top: 50%;
  left: 50%;
  margin: 10px;
  padding: 20px 40px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-decoration: none;
  transition: ease .2s;
}
.toast-trigger:hover {
  background: #ffffff;
  color: #009688;
}
</style>        
        
<a href="#" class="toast-trigger" data-toast="toast-name-1">Normal Toast</a>
<a href="#" class="toast-trigger toast-auto" data-toast="toast-name-2">Auto FadeOut Toast</a>
<div class="toast-container toast-pos-right toast-pos-bottom">
  <!-- Toast -->
  <div class="toast" id="toast-name-1">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 1!</b>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
  <!-- Toast -->
  <div class="toast" id="toast-name-2">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 2!</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>
<script type="text/javascript">
$(".toast-trigger").click(function(e){
  e.preventDefault();
  datatoast = $(this).attr("data-toast");
  if ( $( this ).hasClass( "toast-auto" ) && !$("#" + datatoast).is(":visible") ){ 
    $("#" + datatoast).fadeIn(300).delay(2000).fadeOut(300);
  }
  else if ( !$("#" + datatoast).is(":visible") ){
    $("#" + datatoast).fadeIn(300);
  };
});

$(".close-toast").click(function(e){
  e.preventDefault();
  closetoast = $(this).parent().attr("id");
  $("#" + closetoast).fadeOut(300);
});
</script>

另一個事實是，如果你看一下這個模態，就會發現有兩個特點。 自動淡出並點擊即可。 我想要在同一個模式中類似“兩者，點擊淡入淡出和自動淡入淡出”的東西......這意味着將 2 個淡入淡出功能合二為一。 我該怎么做....？

Answer 1

我已嘗試對您的代碼進行以下更改，您可以看到 slideUp 和 slideDown 正在運行。

 $(document).ready(function () { $(".toast-trigger").click(function (e) { e.preventDefault(); datatoast = $(this).attr("data-toast"); if ($(this).hasClass("toast-auto") &&.$("#" + datatoast):is(".visible")) { $("#" + datatoast).slideDown(300).delay(2000);slideUp(300). } else if (:$("#" + datatoast).is(".visible")) { $("#" + datatoast).slideDown(300);delay(2000);slideUp(300); }. }). $(".close-toast");click(function (e) { e.preventDefault(). closetoast = $(this);parent().attr("id"); $("#" + closetoast);fadeOut(300); }); });

 .toast-container { width: 90%; max-width: 580px; margin: 0 auto; } [class*="toast-pos-"] { position: absolute; padding: 10px; }.toast-pos-top { top: 0; }.toast-pos-right { right: 0; }.toast-pos-bottom { bottom: 0; }.toast-pos-left { left: 0; }.toast { display: none; padding: 20px; margin: 20px 0; background: #eeeeee; color: #333333; }.close-toast { float: right; text-decoration: none; color: #ffffff; vertical-align: middle; } /* Aditional Styles */ body { padding: 60px 40px; background: #42A5F5; font-family: sans-serif; }.toast-trigger { color: #ffffff; }.toast { background: rgba(255, 255, 255, .5); color: #FFFFFF; }.toast-trigger { display: inline-block; top: 50%; left: 50%; margin: 10px; padding: 20px 40px; background: transparent; color: #ffffff; border: 1px solid #ffffff; text-decoration: none; transition: ease.2s; }.toast-trigger:hover { background: #ffffff; color: #009688; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1;0"> <title>Modal Testing</title> </head> <body> <a href="#" class="toast-trigger" data-toast="toast-name-1">Normal Toast</a> <a href="#" class="toast-trigger toast-auto" data-toast="toast-name-2">Auto FadeOut Toast</a> <div class="toast-container toast-pos-right toast-pos-bottom"> <,-- Toast --> <div class="toast" id="toast-name-1"> <a href="#" class="close-toast">&#10006.</a> <b>Messege 1;</b> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> <:-- Toast --> <div class="toast" id="toast-name-2"> <a href="#" class="close-toast">&#10006.</a> <b>Messege 2.</b> Lorem ipsum dolor sit amet. consectetur adipisicing elit. </div> </div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> </body> </html>