指定した要素をフェイド・スライド「Slide and Fade」 - jQueryプラグイン
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素をフェイド・スライドするjQueryプラグイン「Slide and Fade」を紹介します。
Slide and Fade
指定した要素をスライドさせながらフェードイン、クリックアクションでスライドさせながらフェードアウトしてくれます。要素ごとにスライドさせる位置を指定できるので、細やかな設定ができます。が、少しだけCSSの設定がめんどくさいかもしれません。
スポンサーリンク
デモで、フェード・スライドの挙動を確認してみてください。なかなかかっこいいですよ。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="slide and fadeのデモでーす。">
<title>Jquery plugin to slide and fade elements - jQuery Plugin Demo</title>
<style>
div.display-screen-description {
width: 400px;
height: 300px;
margin: 20px auto;
position: relative;
border: 1px solid blue;
}
div.fragment {
position: absolute;
width: 345px;
height: 24px;
font-size: 18px;
}
#a {
top: 30px;
left: 30px;
}
#b {
top: 60px;
left: 30px;
}
#c {
top: 90px;
left: 30px;
}
#d {
top: 188px;
left: 30px;
}
#e {
top: 218px;
left: 30px;
}
#f {
top: 248px;
left: 30px;
}
</style>
</head>
<body>
<h1>slide and fadeのデモでーす。</h1>
<div class="display-screen-description" id="display-screen">
<div class="displayBox" id="displayBox_0">
<div class="fragment" id="a">スライドしながら！！！！</div>
<div class="fragment" id="b">フェイド・イーーーン！！！</div>
<div class="fragment" id="c">クリックしてね。</div>
</div>
<div class="displayBox" id="displayBox_1">
<div class="fragment" id="d">もういっちょ！</div>
<div class="fragment" id="e">フェイド・イーーーン！！！</div>
<div class="fragment" id="f">クリックしてね。</div>
</div>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="jquery.slideandfade.min.js"></script>
<script>
$(function() {
var screenToDisplay = 1;
var displayScreen = $('#display-screen');
displayScreen.click(function() {
var settings = {callback : function() { screenToDisplay = screenToDisplay == 0 ? 1 : 0; } };
$('#display-screen').slideandfade($('#displayBox_'+screenToDisplay), settings );
});
displayScreen.slideandfade($('#displayBox_0'));
});
</script>
</body>
</html>
スポンサーリンク