我想fadeOut()页面上的图像,并在动画结束后将其从DOM中删除。听起来很容易吗?
示例代码(图片的ID为“img1”):
$("#img1").fadeOut("slow", function() { $(this).remove() });
这不起作用。当我用Firebug检查页面时,图像仍然存在。它只是隐藏。
第二个应该闪现图像的例子:
$("#img1").fadeOut("slow", function() { $(this).fadeIn() });
奇怪。
感谢您的示例页面运行良好且符合预期。
问题必须是其他问题,只会发生在我的项目环境中。
旁注:当我在回调函数中执行一个简单的console.log($(this))时,结果就是window对象本身了?!
当我发现副作用会产生问题时,我会更新这个问题。
答案 0 :(得分:4)
这两个例子对我来说都是正常的,正如所展示here(对于糟糕的图像道歉,这是我发现的第一件事!)。图像1淡出,然后从DOM中移除,Image2淡出然后返回,位于Image1最初定位的位置。
我理解正确吗?
P.S。您可以编辑示例here
答案 1 :(得分:3)
查询支持链接,这意味着 你可以用同样的东西获得 以下命令:
。$( '#IMG1')淡出( '慢')除去(); $( '#IMG1')淡出( '慢')淡入( '慢');
它看起来更好,它会工作=)
$('#img1').fadeOut('slow').fadeIn('slow');
将起作用,因为jQuery会将效果排队,但是当你调用
时$('#img1').fadeOut('slow').remove();
框架将在后台运行fadeOut,并在对象开始淡出之前执行remove()
答案 2 :(得分:1)
它为我工作。 Firebug 1.2.1中的HTML Inspector清楚地显示了要删除的元素。也许你没有使用最新的JQuery?
我的测试代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").click(function () {
$("p").fadeOut("slow", function()
{
$(this).remove();
});
});
});
</script>
<style>
p { font-size:150%; cursor:pointer; }
</style>
</head>
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
</body>
</html>
答案 3 :(得分:-2)
jQuery支持链接,这意味着您可以使用以下命令获取相同的内容:
$('#img1').fadeOut('slow').remove();
$('#img1').fadeOut('slow').fadeIn('slow');
它看起来更好,它会工作=)