单击时水平播放幻灯片动画

问题描述

|| 带id=\"content\"的Div需要更改内容。我有两个DIV，在某个地方由id=1和id=2生成，并且我想divid=\"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>

解决方法

基于此SO答案的纯CSS示例：它使用CSS3flex作为模板，并使用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>

,这是一个多步骤的过程： 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;
}

,我会玩一些并查看源代码，以学习如何手动进行。您可以通过检查以下内容开始：http://css-tricks.com/examples/AnythingSlider/ 如果没有，它具有完整的下载源以及有关如何实现它的文档 ,更改div内容的最好方法是使其中的两个sub-div都可用。最初做一个display:none;，并在一定条件下将其设为as13ѭ 它在Chrome，FF和IE上完美运行。

动画动画单击幻灯片播放播放水平