Browse Source

Subtle animation

Nathaniel van Diepen 12 years ago
parent
commit
fdbf7d7755
3 changed files with 22 additions and 9 deletions
  1. 6 0
      www/css/style.css
  2. 1 1
      www/index.html
  3. 15 8
      www/js/omnomirc.js

+ 6 - 0
www/css/style.css

@@ -36,6 +36,9 @@ html,body{
 	transition: height 0.3s;
 	z-index: 10;
 }
+#head:hover{
+	height: 24px;
+}
 #head.hovered{
 	height: 40px;
 }
@@ -77,6 +80,9 @@ html,body{
 	border-right-style: solid;
 	right: 36px;
 }
+#settings.hovered,#users.hovered{
+	height: 21px;
+}
 #settings.open,#users.open{
 	width: 150px;
 	height: 100%;

+ 1 - 1
www/index.html

@@ -12,7 +12,7 @@
 		<link rel="stylesheet" href="css/style.css"></link>
 	</head>
 	<body>
-		<div id="head" class="hovered">
+		<div id="head">
 			<div id="info" class="unselectable">
 				<span id="title"></span>
 				<span id="topic"></span>

+ 15 - 8
www/js/omnomirc.js

@@ -20,7 +20,7 @@
 (function(window,$,undefined){
 	var $o = window.OmnomIRC = window.$o = function(){
 		return 'Version: '+$o.version
-	},$i,$s,$cl,$tl,log=console.log,tabs=[],selectedTab=0;
+	},$i,$s,$h,$cl,$tl,log=console.log,tabs=[],selectedTab=0;
 	$.extend($o,{
 		version: '0.1',
 		send: function(msg){
@@ -104,6 +104,7 @@
 		$s = $('#send');
 		$cl = $('#content-list');
 		$tl = $('#tabs-list');
+		$h = $('#head');
 		$s.click(function(){
 			if(!$s.hasClass('clicked')){
 				$s.addClass('clicked');
@@ -128,23 +129,28 @@
 		});
 		$('#settings, #users').click(function(){
 			$(this).addClass('open');
-		}).hoverIntent({
+		}).hover(function(){
+			$(this).addClass('hovered');
+		},function(){
+			$(this).removeClass('hovered');
+		}).children('.close-button').click(function(){
+			$(this).parent().removeClass('open');
+			return false;
+		});
+		$('#users').hoverIntent({
 			out: function(){
 				$(this).removeClass('open');
 			},
 			timeout: 1000
-		}).children('.close-button').click(function(){
-			$(this).parent().removeClass('open');
-			return false;
 		});
-		$("#head").hoverIntent({
+		$h.hoverIntent({
 			over: function(){
 				setTimeout(function(){
 					$('#head:hover').addClass('hovered');
 				},1000);
 			},
 			out: function(){
-				$(this).removeClass('hovered');
+				$h.removeClass('hovered');
 			},
 			timeout: 1000
 		}).click(function(){
@@ -162,8 +168,9 @@
 		//END DEBUG
 		$o.refreshTabs();
 		$o.event('ready');
+		$h.addClass('hovered');
 		setTimeout(function(){
-			$('#head').removeClass('hovered');
+			$h.removeClass('hovered');
 		},1000);
 	});
 })(window,jQuery);