16

我试图淡入一个div，让它在屏幕上保持几秒钟然后淡出。问题是它没有像我预期的那样长时间停留在屏幕上，即使将延迟设置为大约 10 秒，它也只是短暂地停留在屏幕上。我已经阅读了很多帖子并尝试了很多事情，例如 settimeout 但我无处可去。

这是我的脚本：

<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>

因此，我从 html 中获取产品代码和价格，修改 div 中的 html，然后将其淡入作为商品已添加到购物车的通知。

这是我要淡入的 div：

<div class="tooltipleft" id="tooltip">
    <span id="code"></span><span id="price"></span>
</div>

和网格中的按钮：

<asp:ImageButton ID="lnkSelect" runat="server" ImageUrl="~/Buttons/add_to_cart.png"
    AlternateText="Add To Cart" CommandArgument='<%# Eval("ProductID") %>' CommandName="Add"
    ImageAlign="Right" />
4

2 回答 2

21

做这样的事情：http: //jsfiddle.net/LJsNG/1/

$(function () {
  $('.tooltipleft').fadeIn('slow', function () {
    $(this).delay(5000).fadeOut('slow');
  });
});
于 2013-01-13T14:47:25.190 回答
17

使用 show 和 hide 代替 fadeIn 和 fadeOut 来查看它是否有效。如果它不起作用，那么您的问题在其他地方。如您所见，这是$('#foo').fadeIn().delay(2000).fadeOut(); 一个正确的代码行。

$('#tooltipleft').show(0).delay(5000).hide(0);
于 2013-01-13T14:41:20.587 回答