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

Jquery的

$("#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

参考文献：

Answer 2

HTML

<a href="#" id="switch"">Español</a>
<a class="english">This is an english paragraph</p>
<p class="spanish hide">Se es la español pargrafio</p>

CSS

.hide {
  display: none;  
}

的jQuery

$("#switch").click(function(){
  $("p.spanish, p.english").toggleClass("hide");
  $(this).text( $("p.spanish").is(":visible") ? "English" : "Español" );
});

Answer 3

在<a href="#" id="switch"之后删除标记上的额外引号，并使用以下内容：

$("#switch").click(function() {
    var toHide = $("p." + ($('p.english').css('display') == 'none' ? 'spanish' : 'english'));
    $(toHide).fadeOut();

    toHide.next().css("margin-top", -1 * toHide.height());
    toHide.next().fadeIn(function() {
        toHide.next().css("margin-top", "auto");
        toHide.insertAfter(toHide.next());
    });

    return false;
});

请参阅此demo。

Answer 4

我不认为它解决了问题，但将id="switch""替换为id="switch"

如何通过点击一个元素淡出一个div并淡入一个？ HTML

4 个答案: