jquery - 如何将 .fadeIn() 添加到此文本切换器

Question

我最近发现了这个脚本:JS fiddle text swapper - 但我想添加一个漂亮的淡入和淡出效果。

我想这是一个由两部分组成的问题。

1. 我可以按照这种结构添加 fadeIn 吗？
2. 我猜我还需要淡出？

非常感谢您的帮助!

谢谢

$(function() {
    $("#all-iso, #date-iso, #actor-iso, #film-iso").on("click", function(e) {
        var txt = "";
        switch ($(this).prop("id")) {
            case "all-iso":
                txt = "ALLE NEWS";
                break;
            case "date-iso":
                txt = "DATUM";
                break;
            case "actor-iso":
                txt = "SCHAUSPIELER";
                break;
            case "film-iso":
                txt = "FILM";
                break;
        }
        $("#news-h3-change").text(txt);
    })
})

Answer 1

尝试

    $("#news-h3-change").fadeOut(function(){
        $(this).text(txt)
    }).fadeIn();

演示:Fiddle

我可能建议使用data-* 让它变得更好一点，比如

<ul id="iso">
    <li data-txt="ALLE NEWS">all-iso</li>
    <li data-txt="DATUM">date-iso</li>
    <li data-txt="SCHAUSPIELER">actor-iso</li>
    <li data-txt="FILM">film-iso</li>
</ul>

<h3 id="news-h3-change"></h3>

然后

$(function () {
    $("#iso > li").on("click", function (e) {
        var txt = $(this).data('txt');
        $("#news-h3-change").stop(true, true).fadeOut(function () {
            $(this).text(txt)
        }).fadeIn('slow');
    })
})

演示:Fiddle