单击时水平动画幻灯片答案

【问题标题】：Animate slideshow horizontally on click单击时水平动画幻灯片
【发布时间】：2016-04-06 02:58:27
【问题描述】：

带有id="content" 的Div 需要更改内容。我有两个DIVs，在某处用id=1 和id=2 生成，我想div id="content" 显示一个，
但是当我单击某个按钮以更改另一个 DIV 上的内容时，但具有平滑的水平动画，就像在图像库上左右滚动一样。如何用 jQuery 做到这一点？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
      <div id="content">
      </div>
  </body>
</html>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

纯 CSS 示例 based on this SO answer:
它使用 CSS3 flex 作为模板，transition 用于漂亮的幻灯片效果：

*{box-sizing:border-box;}
html, body{height:100%; margin:0;}
body{
  font: 16px/1 sans-serif;
  color:#fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
nav ul{
  list-style:none;
  padding:0;
  margin:0;
  display: flex;
}
nav ul li{
  flex: 1;
}
nav ul li a{
  display: block;
  text-align:center;
  padding:24px;
  background:#0bf;
  color:#fff;
}
#pages{
  flex-grow: 1;
  display: flex;
  transition: 1s;
}
#pages section{
  overflow: auto;
  min-width: 100%;
  overflow-y: auto;
  padding: 0 32px;
  font-size: 40px;
}

.bg1{background:#0af;}
.bg2{background:#f0a;}
.bg3{background:#0fa;}

#home:target ~ #pages{
  transform: translateX(-0%);
}
#about:target ~ #pages{
  transform: translateX(-100%);
}
#contact:target ~ #pages{
  transform: translateX(-200%);
}

<nav>
  <ul>
    <li><a href="#home" class="bg1">HOME</a></li>
    <li><a href="#about" class="bg2">ABOUT</a></li>
    <li><a href="#contact" class="bg3">CONTACT</a></li>
  </ul>
</nav>

<!-- dummy anchor targets -->
<i class="target" id="home"></i>
<i class="target" id="about"></i>
<i class="target" id="contact"></i>

<div id="pages">
  <section class="bg1">
    <h1>WELCOME</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure repellendus impedit, fugiat nostrum totam possimus perferendis aut explicabo, perspiciatis veritatis dolorem recusandae ut ratione similique magnam ex tenetur qui doloribus.</p>
  </section>  
  <section class="bg2">
    <h1>ABOUT</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus praesentium ipsum esse autem quisquam earum accusantium cumque, ipsa ratione saepe sunt voluptatibus fuga perspiciatis reiciendis qui impedit nam itaque incidunt.</p>
  </section>  
  <section class="bg3">
    <h1>CONTACT</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum perspiciatis, quae tempore voluptas modi dignissimos asperiores quibusdam adipisci eligendi facilis eos eius corrupti, numquam nulla dolorum, impedit rem fugit rerum?</p>
  </section>
</div>

P.S：不要忘记将所需的旧版 -vendor- 前缀 添加到所需的 CSS3 属性中

【讨论】：

【解决方案2】：

这是一个多步骤的过程：

1/监听需要点击切换内容的按钮的点击事件

2/点击时，您可以使用动画功能将您希望替换的内容滑出容器 div。像

$('#id1').animate({'margin-left':'-=500px'},500)

应该可以。第二个“500”是动画的速度。

3/ 然后你需要使用相同的功能来滑动你想要显示的内容。

4/ 当然，您需要正确的 css 样式。类似的东西：

#content{
   width:100px //width of your div
   height : 100px // height of your div
   overflow : hidden;
}

【讨论】：

【解决方案3】：

我会玩一点并查看资源以学习如何手动操作。你可以从检查这个开始：http://css-tricks.com/examples/AnythingSlider/

如果没有，它有完整的下载源和如何实现它的文档

【讨论】：

【解决方案4】：

更改 div 内容的最佳方法是使其内部的子 div 都可用。

最初创建一个display:none;，并根据某些条件将其设置为display:block;

它在 Chrome、FF 和 IE 上完美运行。

【讨论】：