隐藏一个容器，更新 innerHTML 然后再次显示它

Question

我想隐藏一个容器，更新容器的innerHTML，然后再次显示容器。我知道这两种操作都是可能的，但是当结合在一起时 - innerHTML 似乎没有更新...

这是 JSFiddle - https://jsfiddle.net/definaly/k4xuscz1/58/

这可能吗？

（供讨论的附加问题 - 您认为这是在网站页面之间切换的合适的异步方式吗？这种方法有什么可能出错的地方吗？）

$('#button').click(function(){
    var content = $('.content');
    
    content.hide('slide', {direction:'left'} ,400);
    
    content.innerHTML = "<h3>Page One</h3>";

    content.show('slide', {direction:'right'} ,400);
    
});

.content{
  position: absolute;
  width: 90%;
  height: 90%;
  background-color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<button id="button"> Click me </button>

<div class="content">

</div>

Answer 1

前缀：我不是 100% 确定这是否是理想的方法，但您可以使用以下 JS 获得所需的结果。

将您的 JS 更改为：

$('#button').click(function(){
    var content = $('.content');

    content.hide('slide', {direction:'left'} ,400);
    setTimeout(function(){
        content.html("<h3>Page One</h3>");
    }, 400)

    content.show('slide', {direction:'right'} ,400);

});

这将设置基本睡眠以防止在 div 滑出屏幕时显示更改，并使用 jquery 提供的 .html() 函数一致性。

Answer 2

您正在使用 jQuery。改变内部 html 的 jQuery 语法不是 .innerHtml = "<blah>"

是.html("<blah>")

所以把content.innerHTML = "<h3>Page One</h3>";改成content.html("<h3>Page One</h3>");

Answer 3

而不是 innerHTML，您只需使用 html 和 jQuery。此外，如果您更改 hide 中的持续时间但忘记在 setTimeout 中更改它，则可以不使用脆弱的 setTimeout，而是使用 setTimeout 的第四个参数=16=]方法。它需要一个函数，当隐藏动画完成时运行。

$('#button').click(function() {
    var content = $('.content');
    
    
    content.hide('slide', {direction:'left'} ,400, function() {
        content.html("<h3>Page One</h3>");    
    });

    content.show('slide', {direction:'right'});
    
});

.content{
  position: absolute;
  width: 90%;
  height: 90%;
  background-color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<button id="button"> Click me </button>

<div class="content">

</div>

隐藏一个容器，更新 innerHTML 然后再次显示它

Hiding a container, updating the innerHTML and then showing it again

javascript

jquery

jquery-ui