Jquery 单击元素时交叉淡入淡入淡出文本，而不向下跳

我试图允许用户点击我网站上的元素，这些元素将不同的文本加载到页面底部的div中。当他们单击图像时，文本会与我当前拥有的代码正确地交叉淡出，但由于两个div同时出现在页面上，一个div会跳下一行，而另一个div会淡出。有没有更好的方法来做到这一点，这样它就不会跳来跳去

您可以在这个JSFIDLE中看到我的工作示例：

以及HTML：

<a href="#" data-toggle="#div1">
    <img src="http://192.241.203.146/assets/img/author.jpg">
</a>
<a href="#" data-toggle="#div2">
    <img src="http://192.241.203.146/assets/img/author.jpg">
</a>

<div id="div1">div 1</div>
<div id="div2">div 2</div>

第一组
第2组

---

谢谢你的帮助。仍在学习：）

您可以想到的一种方法是将div设置为

绝对值，因为在任何时间点只有1个div可见

div {
    position:absolute;
}


不幸的是，虽然这解决了我的问题，但它破坏了页面上的其他内容，因此我需要继续查找：(
div {
    position:absolute;
}