Question

我正在尝试使用jQuery淡出一个元素，替换它的innerHTML并在替换内容后将其淡化。使用.html() - 方法和.find() - 方法替换元素的内容是有效的，但是当我尝试向正在查找并放置{{1的函数的函数添加延迟时它停止工作。到目前为止，这是我的代码：

innerHTML是内容应该被替换的元素; '#current-title'包含应该在'#title1'中结束的文本。所有这一切都应该在新文本发布之前和之后转换不透明度'#current-title'时发生。

'#current-title'

相同功能的简化版本，只替换$(document).ready(function() { $.replace = function() { $('#current-title').css("opacity", "0"); setTimeout(function() { $('#current-title').html($(this).find('#title1').html()); }, 500); setTimeout(function() { $('#current-title').css("opacity", "1"); }, 1000); alert('Title has been replaced.'); }; $(".replace-btn").click(function() { $.replace(); }); }); html而没有'#current-title'，效果很好：

setTimeout

为什么我的第一段代码中的$(document).ready(function() { $.replace = function() { $('#current-title').html($(this).find('#title1').html()); alert('Title has been replaced.'); }; $(".replace-btn").click(function() { $.replace(); }); });无效？

setTimeout

$(document).ready(function() {
  $.replaceDelayed = function() {

    $('#current-title').css("opacity", "0");

    setTimeout(function() {
      $('#current-title').html($(this).find('#title1').html());
    }, 500);

    setTimeout(function() {
      $('#current-title').css("opacity", "1");
    }, 1000);

    setTimeout(function() {
      alert('Title has been replaced.');
    }, 1000);
  };

  $(".replace-btn").click(function() {
    $.replaceDelayed();
  });
});


$(document).ready(function() {
  $.replaceNormal = function() {

    $('#current-title').html($(this).find('#title1').html());

    alert('Title has been replaced.');
  };

  $(".replace-btn2").click(function() {
    $.replaceNormal();
  });
});

.title {
  visibility: hidden;
}

* {
  transition: opacity 0.3s ease;
}

Answer 1

以下是使用jQuery.fadeOut然后jQuery.fadeIn的简单示例：

$(document).ready(function() {
  var count = 0;
  $( "p" ).click(function() {
    ++count;
    $this = $(this);
    $this.fadeOut(500, function() {
      $this.html("Project Title #" + count);
      $this.fadeIn(500);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Project Title #0</p>

运行代码段，然后每次单击项目标题时，它都会淡出，其数字会递增，然后逐渐淡入。

Answer 2

在代码中，如果没有setTimeout，则this会引用window对象。 window.find将在当前窗口中搜索字符串。它不会搜索文档中的元素。 Refer this

setTimeout`方法中的

this返回一个函数对象。

因此，在删除this后，您的代码才能正常工作。

这很有效。

$(document).ready(function() {
  $.replaceDelayed = function() {

    $('#current-title').css("opacity", "0");

    setTimeout(function() {
      //console.log(this) returns the window object
      $('#current-title').html($('#title1').html());
    }, 500);

    setTimeout(function() {
      $('#current-title').css("opacity", "1");
    }, 1000);


  };

  $(".replace-btn").click(function() {
    $.replaceDelayed();
  });
});


$(document).ready(function() {
  $.replaceNormal = function() {
    //console.log(this); returns a function object
    $('#current-title').html($('#title1').html());

    alert('Title has been replaced.');
  };

  $(".replace-btn2").click(function() {
    $.replaceNormal();
  });
});

.title {
  visibility: hidden;
}

* {
  transition: opacity 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-title">
  <a>Project Title #0</a>
</div>

<br>

<div class="title" id="title1">
  <a>Project Title #1</a>
</div>

<br>

<button class="replace-btn">
  Replace Title (with delay)
</button>

<button class="replace-btn2">
  Replace Title (without delay)
</button>

Answer 3

$(document).ready(function() {
  $.replaceDelayed = function() {

    $('#current-title').css("opacity", "0");

    setTimeout(function() {
      $('#current-title').html($(document).find('#title1').html());
    }, 500);

    setTimeout(function() {
      $('#current-title').css("opacity", "1");
    }, 800);

    setTimeout(function() {
      alert('Title has been replaced.');
    }, 1000);
  };

  $(".replace-btn").click(function() {
    $.replaceDelayed();
  });
});


$(document).ready(function() {
  $.replaceNormal = function() {

    $('#current-title').html($(document).find('#title1').html());

    alert('Title has been replaced.');
  };

  $(".replace-btn2").click(function() {
    $.replaceNormal();
  });
});

.title {
  visibility: hidden;
}

* {
  transition: opacity 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-title">
  <a>Project Title #0</a>
</div>

<br>

<div class="title" id="title1">
  <a>Project Title #1</a>
</div>

<br>

<button class="replace-btn">
  Replace Title (with delay)
</button>

<button class="replace-btn2">
  Replace Title (without delay)
</button>

这里$(this)引用了Window Object。获取需要使用$(document)对象

的处理程序

尝试一下

jQuery：延迟替换div的innerHTML？

3 个答案: