Question

我一直在尝试从左到右滑动div 并替换另一个div，同时按下后退链接，它将从右到左回到前一个div，滑动效果。这就是我迄今取得的成就Jsfiddle。我用Jquery，id选择器完成了这个。但是我需要为多个div做同样的效果，我怎么能用class来实现。

   #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 code

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

Div使用Jquery滑动

0 个答案: