Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] mouseover, mouseout
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
john_doe
2.06.2010, 12:29:25
Witam,

proszę o wyrozumiałość - w jquery jestem zielony ale się uczę smile.gif
mam nadzieję, że za dużo kodu nie wkleję. Teraz działa na najazd myszką. Po zjechaniu chciałbym aby wracało do pierwotnej postaci.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml"> 
  6.  
  7. 	<head> 
  8.  		<title>j query</title> 
  9.  
  10. 		<style type="text/css">
  11.  
  12. 			#wrapper
  13. 			{
  14. 				widht: 800px;
  15. 				height: 500px;
  16. 				border: 1px solid red;
  17. 			}
  18.  
  19. 			#wrapper #box
  20. 			{
  21. 				width: 100px;
  22. 				height: 400px;
  23. 				background: #b02329;
  24. 				float: left;
  25. 			}
  26. 			#wrapper #box1
  27. 			{
  28. 				width: 100px;
  29. 				height: 400px;
  30. 				background: green;
  31. 				float: left;
  32.  
  33. 			}
  34.  
  35. 		</style>
  36.  
  37. 		<script type="text/javascript" src="jquery.js"></script> 
  38.  
  39. 	<script type="text/javascript">
  40.  
  41. 		$(function()	{
  42.  
  43.  
  44. 			$('#box').mouseover(function()	{
  45.  
  46. 				$(this).animate({
  47.  
  48. 					"width" : "400px"
  49. 				});
  50.  
  51. 			});
  52.  
  53. 		});	
  54.  
  55. Witam,
  56.  
  57. proszę o wyrozumiałość - w jquery jestem zielony ale się uczę :)
  58. mam nadzieję, że za dużo kodu nie wkleję. Teraz działa na najazd myszką. Po zjechaniu chciałbym aby wracało do pierwotnej postaci. Zrobione dla jednego boxa - ale czy nie można by tego lepiej zapisać?
  59. [html]
  60. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  61.  
  62. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  63.  
  64. <html xmlns="http://www.w3.org/1999/xhtml"> 
  65.  
  66. 	<head> 
  67.  		<title>j query</title> 
  68.  
  69. 		<style type="text/css">
  70.  
  71. 			#wrapper
  72. 			{
  73. 				widht: 800px;
  74. 				height: 500px;
  75. 				border: 1px solid red;
  76. 			}
  77.  
  78. 			#wrapper #box
  79. 			{
  80. 				width: 100px;
  81. 				height: 400px;
  82. 				background: #b02329;
  83. 				float: left;
  84. 			}
  85. 			#wrapper #box1
  86. 			{
  87. 				width: 100px;
  88. 				height: 400px;
  89. 				background: green;
  90. 				float: left;
  91.  
  92. 			}
  93.  
  94. 		</style>
  95.  
  96. 		<script type="text/javascript" src="jquery.js"></script> 
  97.  
  98. 	<script type="text/javascript">
  99.  
  100. 		$(function()	{
  101.  
  102.  
  103. 			$('#box').mouseout(function()	{
  104.  
  105. 				$(this).animate({
  106.  
  107. 					"width" : "100px"
  108. 				});
  109.  
  110. 			});
  111.  
  112. 		});
  113.  
  114. 		$(function()	{
  115.  
  116.  
  117. 			$('#box1').mouseover(function()	{
  118.  
  119. 				$(this).animate({
  120.  
  121. 					"width" : "400px"
  122. 				});
  123.  
  124. 			});
  125.  
  126. 		});		
  127.  
  128. 	</script>
  129.  
  130. 	</head> 
  131.  
  132. <body> 
  133.  
  134. <div id="wrapper">
  135. 	<div id="box"></div>
  136. 	<div id="box1"></div>
  137. </div>
  138.  
  139.  
  140.  
  141. </body> 
  142.  
  143. </html> 
[HTML] pobierz, plaintext
erix
2.06.2010, 14:31:31
Zainteresuj się metodą hover().
vokiel
2.06.2010, 15:06:41
Może tak:
[JAVASCRIPT] pobierz, plaintext 
  1. $('#box1').mouseover(function(){
  2.     $(this).animate({
  3.         "width" : "400px"
  4.     });
  5. }).mouseout(function(){
  6.     $(this).animate({
  7.         "width" : "100px"
  8.     });
  9. });
[JAVASCRIPT] pobierz, plaintext


Lub w jednej funkcji za pomocą .hover()
[JAVASCRIPT] pobierz, plaintext 
  1. $('#box1').hover(
  2.     function(){
  3.         $(this).animate({
  4.             "width" : "400px"
  5.         });
  6.     },
  7.     function(){
  8.         $(this).animate({
  9.             "width" : "100px"
  10.         });
  11.     }
  12. );
[JAVASCRIPT] pobierz, plaintext
erix
2.06.2010, 15:45:43
Do takich rzeczy lepiej unikać onmouseover/onmouseout -> przeglądarki potrafią wyzwolić takich zdarzeń kilka w ciągu jednego "najechania", dlatego zalecane jest używanie hover.
vokiel
3.06.2010, 11:51:34
@erix a o tym jeszcze nie słyszałem, mógłbyś przybliżyć temat jakimś linkiem?
erix
4.06.2010, 11:06:36
mouseover jest wyzwalane każdorazowo, gdy kursor znajdzie się na dowolnym elemencie wewnątrz. Np. mamy paragraf, w środku spana, to najeżdżając na spana zdarzenie wyzwoli się dwukrotnie.

Za dokumentacją: http://api.jquery.com/mouseover/
Cytat
Show the number of times mouseover and mouseenter events are triggered. mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.


Metoda hover jest połączeniem mouseenter i mouseleave. winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.