GINPRO / SQLの窓と銀プログラマ

<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></"+"script>");
}
</script>
<script>
if ( !window.jQuery.ui ) {
	document.write("<"+"link rel=\"stylesheet\" href=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css\">");
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js\"></"+"script>");
}
if ( !window.jQuery.balloon ) {
	document.write("<"+"script src=\"http://winofsql.jp/js/jquery.balloon.min.051.js\"></"+"script>");
}
</script>
<style>
.balloon_animate {
	cursor: pointer;
}
</style>
<script>
var contents_text_animate = {
	fade_swing: "fade_swing",
	slide_right_150: "右からスライドしますが、右からの指定は追加オプション指定です。さらに、スライドの開始位置も指定しています",
	pulsate_easeOutElastic: "点滅",
	blind_easeInExpo: "窓のブラインド"
}
var animate_func = {
	fade_swing: function(d) {
		this.show( {
			effect: "fade",
			duration: d,
			easing: "swing" 
		}); 
	},
	slide_right_150: function(d) {
		this.show( {
			effect: "slide", direction: "right", distance: 150,
			duration: d,
			easing: "swing" 
		}); 
	},
	pulsate_easeOutElastic: function(d) {
		this.show( {
			effect: "pulsate",
			duration: d,
			easing: "easeOutElastic" 
		}); 
	},
	blind_easeInExpo: function(d) {
		this.show( {
			effect: "blind",
			duration: d,
			easing: "easeInExpo" 
		}); 
	}
}
$(function() {
	$( ".balloon_animate" ).each( function() {
		$( this ).balloon(
			{
				showDuration: 400,
				showAnimation: animate_func[this.id],
				contents: contents_text_animate[this.id],
				position: "right",
				tipSize: 20,
				offsetY: 0,
				offsetX: 30,
				css: {			
					width: "200px",
					height: "150px",
					opacity: "1",
					color: "#333",
					fontSize: "16px",
					borderRadius: "10px",
					border: "solid 2px #A63814",
					padding: "10px"
				}
			}
		);
	});

});
</script>
<pre>






<span class="balloon_animate" id="fade_swing">▼ マウスカーソルを上に重ねて下さい
● fade_swing</span>



<span class="balloon_animate" id="slide_right_150">▼ 右からスライド
● slide_right_150</span>



<span class="balloon_animate" id="pulsate_easeOutElastic">▼ 点滅
● pulsate_easeOutElastic</span>



<span class="balloon_animate" id="blind_easeInExpo">▼ 窓のブラインドを開けるように
● blind_easeInExpo</span>
</pre>