javascript - 我如何通过单击一个元素淡出一个 div 并淡入一个？ HTML

Question

我希望一段文本淡出，然后在我单击代码中的 href 时用另一段代替。

HTML

<a href="#" id="switch"">Espanol</a>

<p class="english">This is an english paragraph</p>
<p class="spanish">Se es la espanol pargrafio</p>

CSS

.spanish {
    display: none;  
}
.english {
    display: block; 
}

查询

$("#switch").click(function(){
    $("p.spanish").show();
    $("p.english").hide();
})

现在我只想让一个消失，然后单击一下，另一个出现在它的位置，但是这段代码不起作用，请帮忙!

Answer 1

您可以在 hide() 中使用回调，或者如示例中的 fadeOut() 函数:

$('#switch').click(
    function(e){
        e.preventDefault();
        $('p.english').fadeOut(
            function(){
                $('p.spanish').fadeIn();
            });
    });

JS Fiddle demo .

---

编辑，对上面的版本进行了稍微改进:

$('#switch').click(
    function(e){
        e.preventDefault();
        $('p.english, p.spanish').fadeToggle(400);
        $(this).text(
            function(){
                if ($(this).text() == 'English'){
                    $(this).text('Espanol');
                }
                else if ($(this).text() == 'Espanol'){
                    $(this).text('English');
                }
            });
    });

JS Fiddle demo .

引用资料:

• > click() .
• > fadeOut() .
• > fadeIn() .
• > fadeToggle() .