JQuery fadeIn Delay FadeOut

时间:2013-01-13 14:34:02

标签: jquery

我正试图淡入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" />

感谢您提供任何帮助或意见。

欢呼声 CM

2 个答案:

答案 0 :(得分:18)

执行以下操作:http://jsfiddle.net/LJsNG/1/

$(function () {
  $('.tooltipleft').fadeIn('slow', function () {
    $(this).delay(5000).fadeOut('slow');
  });
});

答案 1 :(得分:12)

使用show and hide而不是fadeIn和fadeOut来查看它是否有效。如果它不起作用,那么你的问题就在别的地方。 如您所见,example $('#foo').fadeIn().delay(2000).fadeOut(); 是正确的代码行。

$('#tooltipleft').show(0).delay(5000).hide(0);