jQueryトランジション：クリックごとに読み込んだ後にaddClassを追加

Question

さて、私のゴールについて説明しよう。 私は小さなプロジェクト（ferecodecamp.comのランダムな見積もりマシン）を実行しました。しかし、私はトランジション付きのスライドショー（パワーポイント）のようにしたい。

は今Random Quote Machine project

1. ページが合計ゼロ不透明から移行する引用符をロードする必要があるため、私が持っているものを参照してください。

   span, i, footer{ 
    
       opacity: 0; 
    
   } 
    
   .transitions { 
    
       transition-duration: 1s; 
    
       opacity: 1; 
    
   }

   ：私は生成ボタンをクリックして、それは引用符を変更する必要がありますし、再び、それは引用thateでなければなりません 2 .Whenは、CSSのようなものかもしれ1.

に0不透明度から来ています

スパン、i、フッターは、遷移時間が1秒の不透明度で0から1になります。

私はいくつかのjQueryを試してみましたが、何もうまく、私は

<script type="text/javascript"> 
 
//for page load 
 
     $(".quote").load(function(){ 
 
      $(".quote").addClass("transitions"); 
 
     }); 
 

 
//for new quote generated 
 
     $(".button").click(function() { 
 
      $(".quote").fadeOut("slow", function() { 
 
       $(this).addClass("quote"); 
 
      }); 
 
      $(".quote").fadeIn("slow", function() { 
 
       $(this).addClass("quote"); 
 
      }); 
 
     }); 
 
    </script>

は拳の部分がまったく動作しませんしたいの方法を行っていませんでした。 .loadイベントは一度も動作していません。.readyイベントは.clickイベントでのみ動作します。

2番目の部分、部分的に動作しますが、最初は消えてしまいます。私は全面的にdesapeared（0不透明）になりたい...

私は2つの長い日を試してきましたが、何も本当にうまくいっていません。私は本当にいくつかの提案を読んでうれしいです。 ありがとうございます！

Answer 1

私はこのようにそれを行うだろう：あなたはproject内コンソールでこれを貼り付けると

// equivalent to $(document).ready(function() 
$(function() { 

    // define an array of elements to fade 
    var elements = [$('#quote'), $('#author')]; 

    fade(); // call a custom function defined below which will execute on page load 

    // on .button click, call the same function 
    $('.button').click(fade); 

    function fade() { 
    // for each element in elements (defined above), execute jQuery's hide() method and then fadeIn() 

    $.each(elements, function(index, element) { 
     element.hide().fadeIn(); 
    }); 
    } 
}); 

、それはうまく動作します。

Answer 2

：$.load()は、jQueryバージョン1.8では非推奨です。

これは、あなたが何を望むかのようになります。

$(document).ready(function(){ 
 
    $(".quote").fadeIn(1000); 
 
}); 
 

 
$(".button").click(function() { 
 
    $(".quote").fadeOut(1000, function() { 
 
     // change the quote here 
 
     $(".quote").fadeIn(1000); 
 
    }); 
 
});

.quote { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="button">new</button> 
 

 
<div class="quote">quote</div>