2013-01-13 76 views
10

我想淡入div,将它保持在屏幕上几秒钟然后淡出。问题是,只要我期望它不会停留在屏幕上,即使将延迟设置为约10秒,它也只是简单地停留在屏幕上。我已经阅读了很多帖子,并尝试了很多东西,比如settimeout,但我无法快速地进入。JQuery淡入淡出延迟淡出

这里是我的脚本:

<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

+0

如预期这应该工作。你可以张贴小提琴它不工作? –

+0

按预期工作:http://jsfiddle.net/265u3/ –

+0

点击这个网页上的添加到购物车按钮http://www.t2tuk.co.uk/Items.aspx?Category=4看看我的意思 –

回答

12

使用的显示和隐藏,而不是淡入淡出,并要看看它是否工作。如果它不起作用,那么你的问题就在别的地方。 正如你看到这个工作example$('#foo').fadeIn().delay(2000).fadeOut(); 是一个正确的代码行。

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

'show(0)'不会执行动画。 'show('slow')'会执行不同于预期的动画。 –

+0

这个问题的代码没有问题:http://jsfiddle.net/265u3/ –

+0

我只是累这个$('。tooltipleft')。show(0).delay(5000).hide(0);它的确定,但仍然不会像5秒那样停留在屏幕上5秒,所以这就是为什么这应该是什么原因? –

16

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

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

提问者代码的这部分没有问题:http://jsfiddle.net/265u3/ –

+0

是的。该淡出不需要延迟5秒,我的是 – Chanckjh

+0

看到我的小提琴。该淡出确实需要延迟 –