Question

<div id="div1">Lorem Ipsum Dolor Sit.</div>
<div id="div2" style="display:none;">Sit Dolor Ipsum Lorem.</div>

我有一个包含上述代码的html，并希望添加一个超链接，将div1的内容更改为div2内容。怎么解决这个？

算法：

div1淡出
div1 content = div2 content
div1淡入

我发现此代码（失败）

$(document).ready(function(){
$("button").click(function(){
    $("#div1").fadeOut();
    $("#div1").html(document.getElementById("div2").innerHTML);
    $("#div1").fadeIn();
});});

*但我更喜欢超链接而不是按钮。

Answer 1

使用JQuery，以下内容应该有效：

// when link is clicked
$("#load").click(function (event) {
  // prevent page from refreshing
  event.preventDefault();
  
  // fade out
  // and wait for animation to finish
  $("#div1").fadeOut().promise()
  // once finished, execute the following function
  .done(function () {
    // copy HTML
    $("#div1").html($("#div2").html())
    // fade in
    .fadeIn();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">Lorem Ipsum Dolor Sit.</div>
<div id="div2" style="display:none;">Sit Dolor Ipsum Lorem.</div>
<a href="#" id="load">Click Me</a>

Answer 2

使用jQuery，它就像1-2-3一样简单

只需调用第一个对象的fadeOut，然后在回调中调用第二个对象

var time = 500; // number of milliseconds
$('#div1').fadeOut(time,function(){
  $('#div2').fadeIn(time);
});

通过淡入和淡出来切换<div>内容

2 个答案: