Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] mouseover, mouseout
john_doe
post
Post #1





Grupa: Zarejestrowani
Postów: 873
Pomógł: 25
Dołączył: 24.07.2005

Ostrzeżenie: (0%)
-----

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


Ten post edytował john_doe 2.06.2010, 12:31:46
Go to the top of the page
+Quote Post

Posty w temacie
- john_doe   [jQuery] mouseover, mouseout   2.06.2010, 12:29:25
- - erix   Zainteresuj się metodą hover().   2.06.2010, 14:31:31
- - vokiel   Może tak: [JAVASCRIPT] pobierz, plaintext $('#...   2.06.2010, 15:06:41
- - erix   Do takich rzeczy lepiej unikać onmouseover/onmouse...   2.06.2010, 15:45:43
- - vokiel   @erix a o tym jeszcze nie słyszałem, mógłbyś przyb...   3.06.2010, 11:51:34
- - erix   mouseover jest wyzwalane każdorazowo, gdy kursor z...   4.06.2010, 11:06:36

« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 12:20
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn