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

<强> Check Fiddle

<强> Using class

点击元素的Crossfade文本没有它跳下来

1 个答案: