1

尝试使用当您单击图像（按钮）时淡入淡出的 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
4

0 回答 0