jQuery淡入延迟淡出

Question

我想让一个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" />

- code mechanic

---

这应该按预期工作。你能发布一个 fiddle，展示它不起作用的情况吗？ - John Dvorak

正常工作：http://jsfiddle.net/265u3/ - John Dvorak

点击此网页上的“添加到购物车”按钮，以了解我的意思：http://www.t2tuk.co.uk/Items.aspx?Category=4 - code mechanic

Answer 1

像这样做：http://jsfiddle.net/LJsNG/1/

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

- Chanckjh

---

这位提问者的代码这部分没有问题：http://jsfiddle.net/265u3/ - John Dvorak

是的，有这个功能。淡出效果不会延迟5秒钟，我的代码会。 - Chanckjh

看看我的fiddle。淡出确实需要延迟。 - John Dvorak

Answer 2

使用show和hide代替fadeIn和fadeOut来测试是否有效。如果不起作用，则问题可能出在其他地方。 正如您所看到的这个例子example，$('#foo').fadeIn().delay(2000).fadeOut(); 是一行正确的代码。

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

- user3707950

---

show(0) 不会执行任何动画。show('slow') 将执行与预期不同的动画。 - John Dvorak

这位提问者的代码这部分没有问题：http://jsfiddle.net/265u3/ - John Dvorak

我刚刚尝试了这个$('.tooltipleft').show(0).delay(5000).hide(0);，它还可以，但仍然不能在屏幕上停留5秒钟，只有2秒钟左右，所以这可能是为什么呢？ - code mechanic

这是我在上面编写代码的网页 http://www.t2tuk.co.uk/Items.aspx?Category=4 目前它正在使用$('.tooltipleft').show(0).delay(5000).hide(0)。 - code mechanic

你没有看到淡出动画，因为你正在刷新页面。一个表单被提交并加载了location.aspx页面。 - user3707950

你不在英国 :-) 在英国的人不会被重定向到location.aspx页面。当div显示完毕后，他们会看到购物车内容在屏幕顶部更新，因此我认为这个post是在div被移除后发生的，这个理解是否正确？ - code mechanic