Javascript 淡入淡出 <th>

Javascript Fadein Fadeout text in <th><div> header cell

本文关键字：th 淡入 Javascript 淡出      更新时间：2023-09-26
标题单元格中的淡出文本。

我已经尝试了几种不同的方法来实现这一目标，我可以让淡入或淡出工作，但不能两者兼而有之。我正在寻找的是能够单击存储在 href 属性中的图像并淡入"更新"一词到div id 标签中，淡出，然后淡入"更多工具"字样或仅显示单词"更多工具"，因为它已经是第 th 标题单元格中的值。

<a id="1" href="" class ="edit_button" title="edit1"><img src="images/editbutton.jpg" title="Submit Your Edit" border="0" height="24" width="24"></img></a>

<th colspan="3"><div id="editupdate">More Tools</div></th>

function (data) {
$('#editupdate').fadeIn().html('Update').delay(2500).fadeOut();
    });

尝试以下操作...

演示小提琴

    $("#editupdate").fadeIn(1000,function(){
        var tmp = $(this).html();
        $("#editupdate").html('Update').fadeOut(1500, function(){
            $("#editupdate").html(tmp).fadeIn(1500);
        });
    });
不起作用

的原因是因为 html 函数没有进入 fadeIn、fadeOut 和 delay 使用的 fx 队列。若要将代码放入队列中，可以使用 queue jQuery 函数。http://api.jquery.com/queue/#queue-queueName-callback-next-

$("#editupdate").fadeIn(1000).queue(function(next) {
    $(this).html("Update");
    next(); //make sure the next function in the queue gets triggered
}).delay(2500).fadeOut(1500);

这应该执行示例代码尝试执行的操作。如果要在fadeOut后再次更改元素的 HTML，只需向队列添加另一个调用即可。或者，你可以使用 fadeIn 的回调参数来做同样的事情（正如 Nikhil 所建议的那样）。我更喜欢这种方法，因为它避免了函数内部的函数，但它们做同样的事情。

相关文章：