Javascript 使用Jquery进行Div滑动_Javascript_Jquery_Html_Css

Javascript 使用Jquery进行Div滑动

javascript jquery html css

Javascript 使用Jquery进行Div滑动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直在尝试从左向右滑动div并替换另一个div，同时按下back链接，它将返回到上一个div，具有从右到左的滑动效果。这里是我迄今为止所取得的成就。我已经使用Jquery、id选择器完成了这项工作。但是我需要对多个div执行相同的操作。同样的效果，如何使用类来实现这一点 #wrapper { width: 880px; margin: 0 auto; padding-top: 25px; } #page { display: block; position: relativ

我一直在尝试从左向右滑动div并替换另一个div，同时按下back链接，它将返回到上一个div，具有从右到左的滑动效果。这里是我迄今为止所取得的成就。我已经使用Jquery、id选择器完成了这项工作。但是我需要对多个div执行相同的操作。同样的效果，如何使用类来实现这一点

   #wrapper { width: 880px; margin: 0 auto; padding-top: 25px; }

#page { 
  display: block;
  position: relative;
  overflow: hidden;
  height: auto;
  background: #fff; 
}
.content {
  box-sizing: border-box;
  width: 600px;
  margin: 0 auto;
  padding-bottom: 30px;
  padding: 5px 15px;
  padding-top: 25px;
}

/* inner page layouts */
.course-list { display: block; position: relative; width: 100%; }
.course-video{ display: none; width: 100%; position: absolute; top: 0; left: 880px; }
.slidelink { font-size: 1.25em; font-weight: bold; display: inline-block; float: right; }
.leftsidelink { font-size: 1.25em; font-weight: bold; display: inline-block; }

HTML代码


$（文档）.ready（函数（）{
var clist=$（“.course list”）；
var cvideo=$（“.course video”）；
/*显示注册页面*/
$（“#showCoursevideo”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var newheight=cvideo.height（）；
$（cvideo.css（“显示”、“块”）；
$（clist）.stop（）.animate({
“左”：“-880px”
}，800，函数（）{/*callback*/}）；
$（cvideo）.stop（）.animate({
“左”：“0px”
}，800，function（）{$（clist）.css（“display”，“none”）；}）；
$（“#页”）.stop（）.animate({
“高度”：新高度+“像素”
}，550，函数（）{/*回调*/}）；
});
/*显示登录页面*/
$（“#showCourselist”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var newheight=clist.height（）；
$（clist）.css（“显示”、“块”）；
$（clist）.stop（）.animate({
“左”：“0px”
}，800，函数（）{/*callback*/}）；
$（cvideo）.stop（）.animate({
“左”：“880px”
}，800，function（）{$（cvideo.css（“display”，“none”）；}）；
$（“#页”）.stop（）.animate({
“高度”：新高度+“像素”
}，550，函数（）{/*回调*/}）；
});
});
JQuery滑动
课程1
课程视频1

为什么不使用滑块插件？@AfshinHaghighat可能是因为灵活性。自己开发没有问题。当然可以。我是说，万一发生紧急情况，为什么不使用滑块插件？@AfshinHaghighat可能是因为灵活性。自己开发没有问题。当然可以。我是在紧急情况下说的

  <html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
  var clist = $(".course-list");
  var cvideo = $(".course-video");

  /* display the register page */
  $("#showCoursevideo").on("click", function(e){
    e.preventDefault();
    var newheight = cvideo.height();
    $(cvideo).css("display", "block");

    $(clist).stop().animate({
      "left": "-880px"
    }, 800, function(){ /* callback */ });

    $(cvideo).stop().animate({
      "left": "0px"
    }, 800, function(){ $(clist).css("display", "none"); });

    $("#page").stop().animate({
      "height": newheight+"px"
    }, 550, function(){ /* callback */ });
  });

  /* display the login page */
  $("#showCourselist").on("click", function(e){
    e.preventDefault();
    var newheight = clist.height();
    $(clist).css("display", "block");

    $(clist).stop().animate({
      "left": "0px"
    }, 800, function() { /* callback */ });
    $(cvideo).stop().animate({
      "left": "880px"
    }, 800, function() { $(cvideo).css("display", "none"); });

    $("#page").stop().animate({
      "height": newheight+"px"
    }, 550, function(){ /* callback */ });
  });
});
  </script>


</head>

<body>
  <div id="wrapper">
    <h1>JQuery Sliding </h1>

    <div id="page">
      <div class="course-list">
        <h2>Course 1</h2>
        <div class="content">
          <a href="#" class="slidelink" id="showCoursevideo">Start1</a>

        </div>
      </div><!-- /end # course-list -->


      <div class="course-video">
        <h2>Course video 1</h2>
        <div class="content">
        <a href="#" class="leftsidelink" id="showCourselist">Back to the course1</a>
        </div>
      </div><!-- /end #course-video -->



  </div>
  </div>
</body>
</html>