jQuery

【jQuery】blockquote要素の後にフェードインするjQueryプラグインjQuery Text Fade Delay

May 22, 2018

jQuery Text Fade Delayはblockquote要素の後に要素が続くようにフェードインし、同時に両方をフェードアウトさせる

Setup

headにCSSとJSファイルを含める

<link rel="stylesheet" href="dist/css/fader.min.css">
<script src="dist/js/fader.min.js"></script>

HTML構造

    <ul id="quotes">
        <li>
            <blockquote>Quote goes here</blockquote>
            <cite>Citation goes here</cite>
        </li>
        <li>
            <blockquote>Second quote goes here</blockquote>
            <cite>Citation goes here</cite>
        </li>
    </ul>

プラグインを呼び出します

    $("#quotes").fader({
	    fadeSpeed: 750,     // blockquote fade in speed
        duration: 4000,     // duration before fading to the next blockquote
        citeDelay: 1500,    // delay until cite element fades in
        citeFadeSpeed: 1000 // cite fade in speed
	})

Browser Support

  1. Chrome 42+
  2. Firefox 39+
  3. Safari 9+
  4. Internet Explorer 10+
  5. Edge 14+

MIT