淡入淡出不工作

Question

在此 jsfiddle 中，文本显示、淡出并被其他文本替换。淡出效果很好，但新文本应该淡入，但不起作用。我发现了很多这样的问题，所有的解决方案都说要隐藏文本所在的容器。有些人说使用 hide()，而另一些人说使用 display:none。我都试过了，但都没有什么不同。这是我的代码。关于如何使文本淡出的任何想法？

<div id="mb-holder" class="mb">
    <div class="mb-align">
        <span id="mb-test"></span>  
    </div>
</div>

<script>
    var msg1 = 'Message 1';
    var msg2 = 'Message 2';

    $("#mb-test").html(msg1);  

    setInterval(swapmessages, 2000);

    function swapmessages() {
        setTimeout(function(){
            $("#mb-test").fadeOut(2000, function() { 
                $(this).hide();               
                $(this).load(function() { $(this).fadeIn(2000); }); 

                var curmsg = $(this).html();

                if (curmsg == msg1) {
                   $(this).html(msg2);    
                } else { 
                   $(this).html(msg1); 
                }
                $(this).css("display","inline"); 
            }); 
        });
    } 
</script>

Answer 1

你有两个问题。首先，您在 div 元素上使用 load 事件处理程序将永远不会被触发。其次，您正在设置立即覆盖淡入淡出动画的元素的 display 。

您还可以稍微整理一下逻辑，方法是提供 text() 一个函数来切换正在显示的消息并将延迟与 setTimeout() 链接起来，以便延迟和淡入淡出具有内在联系。试试这个：

var msg1 = 'Message 1';
var msg2 = 'Message 2';
$("#mb-test").html(msg1); 
swapmessages();

function swapmessages() {
    $("#mb-test").fadeOut(2000, function() {
        $(this).text(function(i, t) {
            return t.trim() == msg1 ? msg2 : msg1;
        }).fadeIn(2000);
        setTimeout(swapmessages, 2000);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mb-holder" class="mb">
    <div class="mb-align">
        <span id="mb-test"></span>
    </div>
</div>

Answer 2

正如 Tim 所说，您不需要那个加载函数：

$(this).load(function() { $(this).fadeIn(2000); });

每次调用 swapmessages 函数时，它都会将 onLoad 事件附加到 span 元素。您可以在 jQuery 文档 here.

中阅读有关此功能的信息

此外，无需隐藏容器并更改 CSS 显示属性:

$(this).hide();
$(this).css("display","inline");

我刚刚添加了一个 fiddle，您可以在其中看到交换的消息和重复的淡入淡出。

淡入淡出不工作

Fadein not working

jquery

fadein