Javascript 淡出单独的div

不知道该怎么做，但我已经尝试过让它工作，但是当我放入

淡出时，菜单按钮会上下跳动

我正在尝试调整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>

不知道你到底在问什么。请详细说明完整的HTML代码。但是，这听起来像CSS定位问题。如果你不想让这些元素随着你的DIV一起移动，请尝试将它们定位为绝对/固定。你的所有DIV都会消失，这就是你正在做的。看看这里，只是尝试淡入淡出DIV，但内容和按钮会跳转。请原谅我的无知……我对这东西还不熟悉，只是想学。尝试了CSS定位，但没有任何帮助。
$('.change-item').click(function(){
    var this_item = $(this).attr("data-item");
    $('.content-item').hide();
    $('.item-' + this_item).fadeIn();
});