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/ 我无法弄清楚它为什么不起作用。当你第一次点击时，它将按照我的预期切换，fadeOut当前文本和fadeIn点击一个。但是，如果您尝试第二次切换，它将在交换之前在活动的下方显示新文本。那是为什么？

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

请注意，display类上的active-art CSS属性将被覆盖，因为fadeIn会将不透明度设置为1.0，然后添加（或更改）CSS {{ 1}}} {}}属性和display会将不透明度设置为0.0，然后将CSS none属性添加（或更改）为fadeOut。

JSFiddle

Answer 2

使用complete的{{1}}功能。它现在等待淡出完成，然后执行fadeout()，所以过渡会更顺畅。

fadein

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

Answer 3

使用

$('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');  
   }); 
});

insteed

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

Answer 4

您不需要ID作为参考。简单地

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

应该这样做。

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

4 个答案: