在 link 上用幻灯片动画显示 div 点击

Question

我试图在点击不同的部分时显示不同的内容，我正在使用此代码：

<style>
.content1 {display:none;}
.content2 {display:none;}
.content3 {display:none;}
</style>


<ul class="sidebar">
 <a href=".content1"><li>Link1</li></a>
 <a href=".content2"><li>Link2</li></a>
 <a href=".content3"><li>Link 3</li></a>
</ul>
<div class="content1 toggle"></div>
<div class="content2 toggle"></div>
<div class="content3 toggle"></div>

结合这个jQuery：

$(".sidebar a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});

效果很好，但我正在尝试制作幻灯片动画，因此一旦单击 .content2 的 link，.content1 会向上滑动，而 .content2 会替换它，等等。

Answer 1

只需调用 .slideUp 隐藏元素和 .sideDown 显示元素，阅读更多关于 jQuery 效果：https://api.jquery.com/category/effects/

JavaScript:

$(".sidebar a").click(function(e){
  e.preventDefault();
  var toShow = $(this).attr('href');

  $(".toggle").slideUp();
  $(toShow).slideDown();
});

CSS

.toggle { width: 100%; height: 100px; }
.content1.toggle { background: #ff0000; }
.content2.toggle { background: #00ff00; }
.content3.toggle { background: #0000ff; }

JSFiddle：https://jsfiddle.net/a827Lmuv/

奖金

切换 active class 以通过 CSS

控制动画

JavaScript

$(".sidebar a").click(function(e){
  e.preventDefault();
  var toShow = $(this).attr('href');

  $(".toggle").removeClass("active");
  $(toShow).addClass("active");
});

CSS

.toggle { width: 100%; height: 0; }
.content1.toggle { background: #ff0000; }
.content2.toggle { background: #00ff00; }
.content3.toggle { background: #0000ff; }

.toggle {
  -webkit-transition: .3s;
  transition: .3s;
}
.toggle.active { height: 100px; }

JSFiddle：https://jsfiddle.net/a827Lmuv/1/

在 link 上用幻灯片动画显示 div 点击

Reveal div on link click with slide animation

html

jquery

animation

slide

奖金