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
 
 Start new topic
Odpowiedzi (1 - 5)
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Zainteresuj się metodą hover().


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
vokiel
post
Post #3





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

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

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


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
erix
post
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
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.


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
vokiel
post
Post #5





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

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

@erix a o tym jeszcze nie słyszałem, mógłbyś przybliżyć temat jakimś linkiem?


--------------------
"It's in our hands... It always was..." | It's in my hands: blog.vokiel.com... It always be...
Go to the top of the page
+Quote Post
erix
post
Post #6





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
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


--------------------

ZCE :: Pisząc PW załączaj LINK DO TEMATU i TYLKO w sprawach moderacji :: jakiś błąd - a TREŚĆ BŁĘDU? :: nie ponaglaj z odpowiedzią via PW!
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

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

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