javascript - 在它们之间切换时，jQuery 文本显示在事件文本下方

Question

我有这个代码:

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/而且我不知道为什么它不起作用。当您第一次单击时，它将按我的预期切换，淡出当前文本，然后淡入单击一个。但是如果你第二次尝试切换，它会在切换前的事件文本下方显示新文本。这是为什么？

Answer 1

那是因为 fadeOut 会将元素淡入透明(在指定的持续时间内)而不是隐藏它。即使动画没有结束，fadeOut 之后的代码也会继续执行。

在你的情况下:最初，您没有任何带有 active-art 类的元素，这意味着您实际上并不需要这一行(或者更好的说法是您不在等待这一行的执行):

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

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

如何解决？

您可以像这样使用 fadeOut 的完整功能:

$('.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