javascript - JQuery を使用して 2 つのページを 1 つのページに結合し、クリックで切り替える div を使用する

Question

画像（ボタン）をクリックするとフェードインおよびフェードアウトするdivを介して、単一のページにフェードインする画像で2つの異なるページを作り直そうとしています。私は他の投稿、JQuery API、およびその他の見つけたものを読んでいて、この時点に到達しましたが、機能していないようです。以下のコードを使用してこれを実現する方法についてのアイデアはありますか? ありがとう！

  :javascript
  $(document).ready(function($){

    $("#page2").hide();
    $(".button").on("click", function(){
      $("#page1, #page2").toggle(slow);
    });

    $('.fade0').removeClass('transparent').addClass('animated').addClass('fadeInDownFaster');
    $('.fade1').removeClass('transparent').addClass('animated').addClass('fadeInDownFaster'); 

    window.setTimeout(function() {
      $('.fade2').removeClass("transparent").addClass("fadeInDown");
      },400);
    window.setTimeout(function() {
      $('.fade2a').removeClass("transparent").addClass("fadeInDown");
      },700);
    window.setTimeout(function() {
      $('.fade3left').removeClass("transparent").addClass("fadeInLeft");
      },900);
    window.setTimeout(function() {
      $('.fade3right').removeClass("transparent").addClass("fadeInRight");
      },900);
    window.setTimeout(function() {
     $('.fade4').removeClass("transparent").addClass("fadeInUp");
      },1200);
  });

.row
  .span4
    .pad-bottom30
    .pad-bottom30

  .span8
    .pad-bottom30
    .pad-bottom30
    .div#page1  
      =image_tag(@page.photos[5].image_url(:full), :class => "animated fade0") if @page.photos[5].image?
    .div#page2
    - if !@page.photos.empty? and @page.photos[0].image?
      #anim-container{:class => "animated fadeIn", :style => "position: relative; width: 699px; height: 570px; background:url(#{@page.photos[0].image_url(:full)}) 96px 17px no-repeat;"}
        =image_tag(page.photos[1].image_url(:full), :class => "transparent animated fade2") if @page.photos[1].image?
        =image_tag(page.photos[2].image_url(:full), :class => "transparent animated fade2a", :style => "margin-left: 20px;") if @page.photos[2].image?
        .page2-right.fade3left.animated.transparent{:style => "top: 255px;"}
          HI
        .page2-right.fade3right.animated.transparent{:style => "top: 255px;"}
          THERE
        =image_tag(page.photos[3].image_url(:full), :class => "transparent animated fade4", :style => "position: absolute; top: 585px; left: 518px;") if @page.photos[3].image?
    .pad-bottom50
    .div#page1{:style => "position: absolute; top: 620px; left: 830px;"}
      = image_tag(@page.photos[6].image_url(:full), :class => "animated button fade1") if @page.photos[6].image?
    .div#page2{:style => "position: absolute; top: 780px; left: 830px;"}
      =image_tag(page.photos[4].image_url(:full), :class => "animated fade1 button") if @page.photos[4].image?
    .pad-top20