jQuery:slideDown不会跳转
我有以下功能jQuery:slideDown不会跳转,jquery,jquery-animate,slidedown,slideup,Jquery,Jquery Animate,Slidedown,Slideup,我有以下功能 function notificationBoxOutput(type, message) { if (type == "success") { $('.notificationBox').removeClass('warning').addClass('success'); } if (type == "warning") { $('.notificationBox').removeClass('success').addClass('warning'); }
function notificationBoxOutput(type, message) {
if (type == "success") { $('.notificationBox').removeClass('warning').addClass('success'); }
if (type == "warning") { $('.notificationBox').removeClass('success').addClass('warning'); }
$('.notificationBox').html('<b>' + type + ':</b> ' + message);
$('.notificationBox').slideDown().delay(3000).slideUp();
}
你知道为什么只有slideUp可以作为动画使用，而slideDown可以在没有动画的情况下跳到吗？试着用这个替换jquery的最后一行
$('.notificationBox').slideDown( function() {
$('.notificationBox').delay(3000).slideUp();
});
尝试用以下内容替换jquery的最后一行
$('.notificationBox').slideDown( function() {
$('.notificationBox').delay(3000).slideUp();
});
问题在于你的CSS。删除
display:blocksuccesswarningdisplay：在success
和warning
类中阻止声明，它将起作用。从.success
和.warning
类中删除display:block
后，它将按原样工作，并让jquery处理它
示例位于
（更改代码以存储对通知的引用并使用该引用，并将一些方法链接在一起。）从.success
和.warning
类中删除显示：block
，并让jquery处理该类后，它应该可以正常工作
示例位于
（更改代码以存储对通知的引用并使用该引用，并将一些方法链接在一起。）我已尝试使用您的代码。我添加了两个按钮来调用函数notificationBoxOutput
<html><head>
<script language="javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function notificationBoxOutput(type, message) {
if (type == "success") {
$('.notificationBox').removeClass('warning').addClass('success'); }
if (type == "warning") {
$('.notificationBox').removeClass('success').addClass('warning'); }
$('.notificationBox').html('<b>' + type + ':</b> ' + message);
$('.notificationBox').slideDown().delay(3000).slideUp();
}
</script>
<style>
div.notificationBox
{
top: 0px;
left: 0px;
width: 100%;
position: fixed;
z-index: 3;
background: #333333;
text-align: center;
vertical-align: center;
opacity:0.85;
filter:alpha(opacity=85);
display: none;
}
div.warning { background-color: #990000; display: block; }
div.success { background: #009900; display: block; }
</style>
</head><body>
<div class="notificationBox">Hi</div>
<button onclick='notificationBoxOutput("success","success")' >success</button>
<button onclick='notificationBoxOutput("warning","warning")' >warning</button>
</body></html>
也访问。JQuery有一个bug。此链接可能会对您有所帮助。我已经尝试了您的代码。我添加了两个按钮来调用函数notificationBoxOutput
<html><head>
<script language="javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function notificationBoxOutput(type, message) {
if (type == "success") {
$('.notificationBox').removeClass('warning').addClass('success'); }
if (type == "warning") {
$('.notificationBox').removeClass('success').addClass('warning'); }
$('.notificationBox').html('<b>' + type + ':</b> ' + message);
$('.notificationBox').slideDown().delay(3000).slideUp();
}
</script>
<style>
div.notificationBox
{
top: 0px;
left: 0px;
width: 100%;
position: fixed;
z-index: 3;
background: #333333;
text-align: center;
vertical-align: center;
opacity:0.85;
filter:alpha(opacity=85);
display: none;
}
div.warning { background-color: #990000; display: block; }
div.success { background: #009900; display: block; }
</style>
</head><body>
<div class="notificationBox">Hi</div>
<button onclick='notificationBoxOutput("success","success")' >success</button>
<button onclick='notificationBoxOutput("warning","warning")' >warning</button>
</body></html>
也访问。JQuery有一个bug。此链接可能会对您有所帮助。这不是主题，但是：每次执行$（'.notificationBox'）
时，jQuery都必须从上到下搜索DOM。与其重复调用函数，不如调用它一次，将结果存储在变量中，然后使用它。这与主题无关，但是：每次执行$（'.notificationBox'）
，jQuery都必须关闭并从上到下搜索DOM。与其重复调用函数，不如调用它一次，将结果存储在变量中，然后使用它。在这种情况下，它仍然会跳转，但不会向后滑动。这应该不是问题。请查看此链接以查看其工作情况。。。（编辑：刚刚看到了被接受的答案……这就是为什么这样做的原因！）在这种情况下，它仍然会跳跃，但根本不会向后滑动。这应该不是问题。请查看此链接以查看其工作情况。。。（编辑：刚刚看到了被接受的答案……这就是为什么这样做的原因！）