我有一个小的jquery代码显示模式。它既简单又干净。但事实上，它只是使用jquery的淡出和淡出动画。slideUp和slideDown动画不工作。我不知道为什么。请看看我的代码。
<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">✖</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">✖</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>
另一个事实是，如果你看这个模态，有两个特征。自动淡出，点击可选。我想要这样的效果"同时，点击淡出和自动淡出"在同一模态.....这是两个渐变特征的平均组合。我该怎么做....?
我在你的代码中尝试了以下更改，你可以看到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">✖</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">✖</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>