jquery.random-fade-in

HTML

<div class="box-container">
  <div><!-- Wrapper (Required) -->
    <p>foo</p><!-- Target to fade-in -->
  </div>
  <div>
    <p>bar</p>
  </div>
  <div>
    <p>baz</p>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.random-fade-in.min.js"></script>

If you want to make fade-in <p>, you MUST wrap it by empty element like <div>.

<p>要素をフェードインさせたい場合、必ず空要素で包まなければなりません。(上の例では<div>要素)

CSS

.box-container div p {
  display: none; /* Required */
}

JavaScript

$('.box-container').randomFadeIn();

JavaScript

$('.box-container').randomFadeIn('slow');
$('.box-container').randomFadeIn(1000);

You can set duration by 1st argument which is same to jQuery ".fadeIn()".

第1引数でフェードイン処理にかける時間を指定できます。
jQueryの"fadeIn()"で指定する値と同じです。

JavaScript

// Repeat (Default)
$('.box-container').randomFadeIn('slow', true);

// No repeat
$('.box-container').randomFadeIn('slow', false);

You can set not to repeat by 2nd argument.

第1引数でフェードイン処理にかける時間を指定できます。
jQueryの"fadeIn()"で指定する値と同じです。

Since: v1.3.0

JavaScript

// Initial apply
$('.box-container').randomFadeIn('', false);

// Reset
$('#reset1').click(function() {
  $('.box-container').randomFadeIn('', false);
});
$('#reset2').click(function() {
  $('.box-container').randomFadeIn(100);
});