jquery - 单击元素时交叉淡入淡出文本而不跳下

Question

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

你可以在这个 jsFiddle 中看到我的工作示例：http: //jsfiddle.net/A8Ymj/241/

$("a[data-toggle]").on("click", function(e) {
  e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding element
  $("div").fadeOut(function(e) {
     $(selector).fadeIn();
  });
});

和 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>

任何帮助表示赞赏。还在学习 ：）

Answer 1

您可以想到的一种方法是将 div 设置为，absolute因为在任何时间点都只有 1 个 div 可见。

div {
    position:absolute;
}

检查小提琴

使用类