fade

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

slide LEFT

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

slide RIGHT

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

slide BOTTOM

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.hcaptions.js"></script>
<script>
    $(window).load(function(){
		$('#HoverCaptionsDemo01').hcaptions({
			effect: 'fade'
		});
		$('#HoverCaptionsDemo02').hcaptions({
			effect: 'slide',
			direction: 'left'
		});
		$('#HoverCaptionsDemo03').hcaptions({
			effect: 'slide',
			direction: 'right',
			speed: '2000'
		});
		$('#HoverCaptionsDemo04').hcaptions({
			effect: 'slide',
			direction: 'bottom',
			speed: '300'
		});
    });
</script>
<div class="HoverCaptions-box">
	<p class="title">fade</p>
	<a href="#HoverCaptionsToggle01" id="HoverCaptionsDemo01"><img src="<PATH>/img11.jpg" alt=""></a>
	<div id="HoverCaptionsToggle01" class="cap-overlay hide">
		<div class="inner">
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
		</div>
	</div>
</div>
<div class="HoverCaptions-box">
	<p class="title">slide LEFT</p>
	<a href="#HoverCaptionsToggle02" id="HoverCaptionsDemo02"><img src="<PATH>/img12.jpg" alt=""></a>
	<div id="HoverCaptionsToggle02" class="cap-overlay hide">
		<div class="inner">
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
		</div>
	</div>
</div>
<div class="HoverCaptions-box">
	<p class="title">slide RIGHT</p>
	<a href="#HoverCaptionsToggle03" id="HoverCaptionsDemo03"><img src="<PATH>/img13.jpg" alt=""></a>
	<div id="HoverCaptionsToggle03" class="cap-overlay hide">
		<div class="inner">
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
		</div>
	</div>
</div>
<div class="HoverCaptions-box">
	<p class="title">slide BOTTOM</p>
	<a href="#HoverCaptionsToggle04" id="HoverCaptionsDemo04"><img src="<PATH>/img14.jpg" alt=""></a>
	<div id="HoverCaptionsToggle04" class="cap-overlay hide">
		<div class="inner">
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
			<p>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
		</div>
	</div>
</div>

HoverCaptionsについて

HoverCaptionsは、Hover時に色々なパターンでキャプションを表示できるプラグインです。 フェードや、スライドイン、速度の調整など、見せ方を細かくカスタマイズできます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスNo license
対応ブラウザ

関連するjQueryプラグイン

  • notifyBar

    notifyBar

    ブラウザ上部に色々なメッセージを表示することができる

  • FaviconNotifier

    FaviconNotifier

    ファビコンに数字を表示したり、変えたりすることができる

  • PercentageLoader

    PercentageLoader

    とてもきれいにロード内容をパーセント表示してくれる

  • Highlighter

    Highlighter

    指定要素のみをハイライト表示

  • LivingFade

    LivingFade

    指定要素をランダムにフェードイン、フェードアウト