JQuery,$(this)在fadeIn,fadeOut回调函数中不正确?

时间:2009-02-02 17:39:14

标签: jquery

我想fadeOut()页面上的图像,并在动画结束后将其从DOM中删除。听起来很容易吗?

示例代码(图片的ID为“img1”):

   $("#img1").fadeOut("slow", function() { $(this).remove() });

这不起作用。当我用Firebug检查页面时,图像仍然存在。它只是隐藏。

第二个应该闪现图像的例子:

   $("#img1").fadeOut("slow", function() { $(this).fadeIn() });

奇怪。


感谢您的示例页面运行良好且符合预期。

问题必须是其他问题,只会发生在我的项目环境中。

旁注:当我在回调函数中执行一个简单的console.log($(this))时,结果就是window对象本身了?!

当我发现副作用会产生问题时,我会更新这个问题。

4 个答案:

答案 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');

它看起来更好,它会工作=)