Witam

Tworze menu i chciałem zrobić coś nowego i wymyśliłem sobie menu które ma opcje (przyciski) nieostre a po najechaniu mają się wyostrzać po przesunięciu myszki miały wracać do stanu wyjściowego. Wszysko pięknie ładnie zabrałem się do pracy napisałem skrypcik. Po wstępnych testach myślałem że wszystko jest ok ale diabeł tkwi w szczegółach sad.gif. Po najechaniu na opcjię opcja się wyostrzała po zejściu opcja wracała do stanu początkowego jednakrze problem zaczoł pojawiać sie gdy zaczołem przesuwać myszkę po poszczególnych opcjach menu. Zaczely się nie wygaszać lub mrugać bez skłądu i ładu. Domyśliłem się że jest to związane z tym że w tle działają procesy czasu które się nie zakończyły a ja ponownie odwołałem się do obiektu. Próbowałem obejść ten problem ale już skończyły mi się pomysły sad.gif. Proszę o pomoc.
Poniżej wklejam kod js.

[HTML] pobierz, plaintext 
  1. function buttonChange()
  2. {
  3. 	this.obj = '';
  4. 	this.timeUp = 0;
  5. 	this.timeDown = 0;
  6. 	this.time = 0;
  7. 	this.opacity = 100;
  8. 	this.speed = 25; //ms
  9. 	var self = this;
  10.  
  11.  
  12. 	this.opacityChange = function( direction, obj )
  13. 	{
  14.  
  15. 		if( direction == 1 )
  16. 		{
  17. 			if( this.opacity < 100  )
  18. 			{
  19. 				this.opacity += this.speed;
  20. 				$('#' + obj.id + ' span.base').css('opacity', ( (1/ 100 ) * this.opacity ) );
  21. 			}
  22. 			else
  23. 			{
  24. 				$('#' + obj.id + ' span.base').css('opacity', 1);
  25. 				clearInterval( self.time );
  26. 			}
  27. 		}
  28. 		else if( direction == 0 )
  29. 		{
  30. 			if( this.opacity >= this.speed )
  31. 			{
  32. 				this.opacity -= this.speed;
  33. 				$('#' + obj.id + ' span.base').css('opacity', ( (1/100) * this.opacity ) );
  34. 			}
  35. 			else
  36. 			{
  37. 				$('#' + obj.id + ' span.base').css('opacity', 0);
  38. 				clearInterval( self.time );
  39. 			}
  40. 		}
  41. 	}
  42.  
  43. 	this.activButton = function(obj)
  44. 	{
  45. 		this.time = setInterval( function(){ self.opacityChange(0, obj) }, 10);
  46. 	}
  47.  
  48. 	this.unactivButton = function(obj)
  49. 	{
  50. 		this.time = setInterval( function(){ self.opacityChange(1, obj) }, 10);
  51. 	}
  52.  
  53. }
  54.  
  55. var buttonChange = new buttonChange();
[HTML] pobierz, plaintext


kod Html

[HTML] pobierz, plaintext 
  1. <div id='menuTop'>
  2. 			<ul>
  3. 				<li id='menuTop0'>
  4. 					<a href='aaa.html'>
  5. 						<span class='hover' id='menuTop0Hover' onmouseover=\"buttonChange.activButton(this);\" onmouseout=\"buttonChange.unactivButton(this);\">
  6. 							<span class='base'></span>
  7. 						</span>
  8. 					</a>
  9. 				</li>
  10. 				<li id='menuTop1'>
  11. 					<a href='bbb.html'>
  12. 						<span class='hover' id='menuTop1Hover' onmouseover=\"buttonChange.activButton(this);\" onmouseout=\"buttonChange.unactivButton(this);\">
  13. 							<span class='base'></span>
  14. 						</span>
  15. 					</a>
  16. 				</li>
  17. 				<li id='menuTop2'>
  18. 					<a href='ccc.html'>
  19. 						<span class='hover' id='menuTop2Hover' onmouseover=\"buttonChange.activButton(this);\" onmouseout=\"buttonChange.unactivButton(this);\">
  20. 							<span class='base'></span>
  21. 						</span>
  22. 					</a>
  23. 				</li>
  24. 				<li id='menuTop3'>
  25. 					<a href='ddd.html'>
  26. 						<span class='hover' id='menuTop3Hover' onmouseover=\"buttonChange.activButton(this);\" onmouseout=\"buttonChange.unactivButton(this);\">
  27. 							<span class='base'></span>
  28. 						</span>
  29. 					</a>
  30. 				</li>
  31. 				<li id='menuTop4'>
  32. 					<a href='eee.html'>
  33. 						<span class='hover' id='menuTop4Hover' onmouseover=\"buttonChange.activButton(this);\" onmouseout=\"buttonChange.unactivButton(this);\">
  34. 							<span class='base'></span>
  35. 						</span>
  36. 					</a>
  37. 				</li>
  38. 			</ul>
  39. 		</div>
[HTML] pobierz, plaintext


oraz css

[HTML] pobierz, plaintext 
  1. #menuTop{
  2. 	float:left;
  3. 	margin:65px 0px 0px 200px;
  4. }
  5.  
  6. #menuTop ul{
  7. 	list-style:none;
  8. 	padding:0px;
  9. 	margin:0px;
  10. }
  11.  
  12. #menuTop ul li{
  13. 	float:left;
  14. 	padding:0px;
  15. 	margin:0px;
  16. }
  17.  
  18. #menuTop0 span.base{
  19. 	width: 48px;
  20. 	height: 19px;
  21. 	display:block;
  22. 	background:url(../img/global/menuTop.png) 0px 0px;
  23. }
  24.  
  25. #menuTop0 span.hover{
  26. 	width:48px;
  27. 	height: 19px;
  28. 	display:block;
  29. 	background:url(../img/global/menuTop.png) 0px 19px;
  30. }
  31.  
  32. #menuTop1 span.base{
  33. 	width:94px;
  34. 	height: 19px;
  35. 	display:block;
  36. 	background:url(../img/global/menuTop.png) -89px 0px;
  37. }
  38.  
  39. #menuTop1 span.hover{
  40. 	width:94px;
  41. 	height: 19px;
  42. 	display:block;
  43. 	margin-left:41px;
  44. 	background:url(../img/global/menuTop.png) -89px 19px;
  45. }
  46.  
  47. #menuTop2 span.base{
  48. 	width:66px;
  49. 	height: 19px;
  50. 	display:block;
  51. 	background:url(../img/global/menuTop.png) -220px 0px;
  52. }
  53.  
  54. #menuTop2 span.hover{
  55. 	width:66px;
  56. 	height: 19px;
  57. 	display:block;
  58. 	margin-left:37px;
  59. 	background:url(../img/global/menuTop.png) -220px 19px;
  60. }
  61.  
  62. #menuTop3 span.base{
  63. 	width:56px;
  64. 	height: 19px;
  65. 	display:block;
  66. 	background:url(../img/global/menuTop.png) -317px 0px;
  67. }
  68.  
  69. #menuTop3 span.hover{
  70. 	width:56px;
  71. 	height: 19px;
  72. 	display:block;
  73. 	margin-left:32px;
  74. 	background:url(../img/global/menuTop.png) -317px 19px;
  75. }
  76.  
  77. #menuTop4 span.base{
  78. 	width:60px;
  79. 	height: 19px;
  80. 	display:block;
  81. 	background:url(../img/global/menuTop.png) -410px 0px;
  82. }
  83.  
  84. #menuTop4 span.hover{
  85. 	width:60px;
  86. 	height: 19px;
  87. 	display:block;
  88. 	margin-left:39px;
  89. 	background:url(../img/global/menuTop.png) -410px 19px;
  90. }
[HTML] pobierz, plaintext