JQuery 淡入延迟淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14304473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery fadeIn Delay FadeOut
提问by code mechanic
I'm trying to fade in a div, keep it on screen for a few seconds then fade it out. The problem is its not staying on screen as long as I expect, even setting the delay for about 10 seconds, it only stay on screen briefly. I've read through many posts and tried many things such as settimeout but I'm going nowhere fast.
我正在尝试淡入 div，将其保留在屏幕上几秒钟然后淡出。问题是它没有像我预期的那样停留在屏幕上，即使设置了大约 10 秒的延迟，它也只是短暂地停留在屏幕上。我已经阅读了很多帖子并尝试了很多东西，例如 settimeout，但我无处可去。
Here's my script:
这是我的脚本：
<script type="text/javascript">
function pageLoad() {
$("[id*=lnkSelect]").live("click", function () {
var price = $("#price").html($(".prodprice", $(this).closest('tr').prev().children ('td.prodpricelabel')).html());
var code = $("#code").html($(".prodcode", $(this).closest('tr').prev().prev().children ('td.prodcodelabel')).html());
//Build the new HTML
$(code).prepend("<br/>Item: ");
$(code).append("<br/>Has been<br/>added to your cart.<br/>Price: ");
$(".tooltipleft").html(code); //Set the new HTML
$(".tooltipleft").append(price);
$(".tooltipleft").fadeIn('slow').delay(5000).fadeOut('slow');
});
};
</script>
So I'm getting the product code and price from the html, modifying the html in the div then fading this in as a notification that an item has been added to the shopping cart.
因此，我从 html 中获取产品代码和价格，修改 div 中的 html，然后将其作为已添加到购物车的项目的通知淡入淡出。
This is the div that I want to fade in:
这是我想要淡入的 div：
<div class="tooltipleft" id="tooltip">
<span id="code"></span><span id="price"></span>
</div>
and the button in the grid:
和网格中的按钮：
<asp:ImageButton ID="lnkSelect" runat="server" ImageUrl="~/Buttons/add_to_cart.png"
AlternateText="Add To Cart" CommandArgument='<%# Eval("ProductID") %>' CommandName="Add"
ImageAlign="Right" />
回答by Chanckjh
do something like this: http://jsfiddle.net/LJsNG/1/
做这样的事情：http: //jsfiddle.net/LJsNG/1/
$(function () {
$('.tooltipleft').fadeIn('slow', function () {
$(this).delay(5000).fadeOut('slow');
});
});
回答by code mechanic
Use show and hide instead of fadeIn and fadeOut to see if it works. If it doesnt work then your problem is somewhere else.
As you see this working examplethe $('#foo').fadeIn().delay(2000).fadeOut();
is a correct line of code.
使用显示和隐藏而不是淡入和淡出来查看它是否有效。如果它不起作用，那么您的问题出在其他地方。正如您看到的这个工作示例，这$('#foo').fadeIn().delay(2000).fadeOut();
是一行正确的代码。
$('#tooltipleft').show(0).delay(5000).hide(0);
