在它们之间切换时，jQuery 文本显示在活动文本下方

jQuery text shows below the active one when switching between them

本文关键字：文本 显示 活动 jQuery 之间      更新时间：2023-09-26

我有这个代码：

.HTML：

<div class="slide-copy col-xs-8">
    <div class="art active-art" id="art_1">
        <h1>TEXT 1</h1>
        <h2>TEXT 1</h2>
        <p>A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsumA TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum... </p>
    </div>
    <div class="art" id="art_2">
        <h1>TEXT 2</h1>
        <h2>TEXT 2</h2>
        <p>A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsumA TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum... </p>
    </div>
    <div class="art" id="art_3">
        <h1>TEXT 3</h1>
        <h2>TEXT 3</h2>
        <p>A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsumA TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum... </p>
    </div>
    <div class="art" id="art_4">
        <h1>TEXT 4</h1>
        <h2>TEXT 4</h2>
        <p>A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsumA TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum A TUTAJ OPIS ELO taki bardzo dlugi lorem ipsum... </p>
    </div>
</div>
    <div class="slide-img col-xs-4">
        <h1>Menu</h1>
        <ul>
            <li>TEXT 1</li>
            <li>TEXT 2</li>
            <li>TEXT 3</li>
            <li>TEXT 4</li>
        </ul>
    </div>
</div>

JavaScript：

$('li').click(function()
{
    var index = $(this).index() + 1;
    $('.active-art').fadeOut(500);
    $('#art_' + index).fadeIn(500);
    $('.active-art').removeClass('active-art');
    $('#art_' + index).addClass('active-art');     
});

.CSS：

.art
{
    display: none;
}
.active-art
{
    display: inline;
}
li
{
    cursor: pointer;
}

http://jsfiddle.net/5p83c/53/而且我不知道为什么它不起作用。当您第一次单击时，它将按我的预期切换，淡出当前文本，淡入单击一个。但是，如果您尝试第二次切换，它将在交换之前在活动文本下方显示新文本。为什么？

这是因为 fadeOut 会将元素淡入透明（在指定的持续时间内）并隐藏它。并且淡出后的代码执行将继续，即使动画尚未完成。

在您的情况下：最初，你没有任何元素与类active-art这意味着你并不真正需要这一行（或者更好地说你不是在等待这一行的执行）：

$('.active-art').fadeOut(500);

但是，第二次，您有一个具有active-art类的元素，当您对该元素调用 fadeOut 时，需要 500 毫秒才能将动画完成为透明，并且只有在最后它才会隐藏该元素。另一方面，$('#art_' + index).fadeIn(500);将在淡出完成元素隐藏之前显示下一个元素（在您的情况下需要 500 毫秒）。

如何解决这个问题？

你可以像这样使用淡出的完整功能：

$('.active-art').fadeOut(500, function () {
     // implement the fade in functionality.
});

旁注，active-art类上的 display CSS 属性将被覆盖，因为fadeIn会将不透明度动画化为 1.0，然后将 CSS display 属性添加到 none，fadeOut会将不透明度动画化为 0.0，然后将 CSS display 属性添加（或更改）到 block 。

JSFiddle

使用 fadeout() 的 complete 函数。现在，它等待淡出完成，然后执行fadein因此过渡会更平滑。

$('li').click(function () {
    var index = $(this).index() + 1;
    var lastIndex = $('.active-art');
    $('.active-art').fadeOut(500, function () {
        $('#art_' + index).fadeIn(500);
        $('.active-art').removeClass('active-art');
        $('#art_' + index).addClass('active-art');
    });
});

http://jsfiddle.net/5p83c/54/

使用

$('li').click(function()
{
    var index = $(this).index() + 1;
   $('.active-art').fadeOut(500,function(){
      $('.active-art').removeClass('active-art');
      $('#art_' + index).fadeIn(500);
      $('#art_' + index).addClass('active-art');  
   }); 
});

因斯蒂德

这是一个小提琴： http://jsfiddle.net/mqwayr6a/

您不需要 ID 作为参考。只是

$('li').click(function()
{
    var index = $('li').index($(this));
    $('.art:eq('+index+')').fadeIn(500).addClass('active-art');
    $('.active-art').fadeOut(500).removeClass('active-art');
});

应该做这个伎俩。

相关文章：