javascript - 淡化单独的 div

Question

不知道如何做到这一点，但我已经尝试过完成这项工作，但是当我放入fadeOut.

我试图在没有按钮和信息跳跃的情况下调整 div 的速度fadeIn和fadeOut速度。

HTML

<div class="item-1 content-item">
    I am the 1st image content
</div>

<div class="item-2 content-item" style="display: none;">
    I am the 2nd image content
</div>

<div class="item-3 content-item" style="display: none;">
    I am the 3rd image content
</div>


<div class="item-1 content-item">
    I am the content for item 1
</div>

<div class="item-2 content-item" style="display: none;">
    I am the content for item 2
</div>

<div class="item-3 content-item" style="display: none;">
    I am the content for item 3
</div>

<ul>
    <li class="change-item" data-item="1">Item 1</li>
    <li class="change-item" data-item="2">Item 2</li>
    <li class="change-item" data-item="3">Item 3</li>
</ul>

javascript

$('.change-item').click(function(){
    var this_item = $(this).attr("data-item");
    $('.content-item').hide();
    $('.item-' + this_item).fadeIn();
});