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

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

您还可以通过为text()提供一个函数来轻微整理逻辑，以便切换显示的消息并使用setTimeout()将延迟链接起来，以便延迟和淡入淡出内在链接。试试这个：

＆＃13;

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);
    });
}

＆＃13;

<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>

＆＃13;

Answer 2

正如Tim所说，你不需要那个加载功能：

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

每次进入swapmessages函数时，它都会将onLoad事件附加到span元素。您可以在jQuery文档here中阅读此函数。

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

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

我刚刚添加了fiddle，您可以在其中查看正在交换的消息并重复淡入淡出。

法丁不工作

2 个答案: