« 2013年10月 | トップページ | 2015年1月 »

2014年6月

[Javascript]マウスオーバのキュー

-------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>sample</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
	function myfadein(partsname) {
		$("#" + partsname).stop(true, true);
		$("#" + partsname).fadeIn('fast');
	}
	function myfadeout(partsname) {
		$("#" + partsname).fadeOut('fast');
	}
</script>
<style type="text/css">
	a.tooltip span {
	     display: none;
	     position: absolute;
	     padding: 3px;
	     font-size: 12px;
	     margin-left: 8px;
	     line-height: 1.6;
	
	background-color: rgba(255,255,255,0.8);
	    border: 1px solid #cccccc;
	     color: #633201;
	    width: 100px;
	
	     z-index:10;
	     border-radius: 15px;
	}
</style>
</head>
<body>
	<a href="" class="tooltip" onmouseover="myfadein('partsid')" onmouseout="myfadeout('partsid')">
	<span id="partsid">ここがアニメーションします</span>
	<img src="image.jpg">
	</a>
</body>
</html>
------------------------------------------------------------
スーパー走り書き。 javascriptのmyfadein()でstopしないと、マウスオーバのキューがたまって マウスオーバした回数だけフェードインしようとする。結果的にぱかぱかする。


« 2013年10月 | トップページ | 2015年1月 »

最近のトラックバック

2017年9月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
無料ブログはココログ