login  Naam:   Wachtwoord: 
Registreer je!
 Forum

jQuery animate (Opgelost)

Offline lolll - 20/03/2011 12:51
Avatar van lolllLid Ik ben pas begonnen met jQuery, en ik wou een div proberen te vergroten, maar ik loop al tegen de problemen aan. Dit is mijn code:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function star(ID){
  2. 	var div=$('.star#' + ID);
  3. 	var div_width=div.attr("width");
  4. 	var div_height=div.attr("height");
  5. 	var div_top=div.position().top;
  6. 	var div_left=div.position().left;
  7. 	div.animate({ width: div_width + 50 + "px", height: div_height + 50 + "px", top: div_top + "-25px", left: div_left + "-25px" }, 'fast');
  8. }

En de aanroep van de functie:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="star" id="1" onmouseover="star(this.id)">
  2. 	Tekst
  3. </div>


Kan iemand mij zeggen wat er fout loopt, want ik weet echt niet wat te doen.

Lolll

8 antwoorden

Gesponsorde links
Offline WouterJ - 20/03/2011 14:34 (laatste wijziging 20/03/2011 14:36)
Avatar van WouterJ HTML gevorderde Allereerst is het handige van jQuery dat je geen onmouseover en andere events meer aan de div moet zetten. Dit kan je in gewoon JavaScript trouwens ook beter met addEventListener doen.

Maar de jQuery versie is:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $(document).ready(function() {
  2. // Dit is de load event op de body. Of te wel als het document klaar is om te starten
  3.  
  4.   $('.star').hover(function() {
  5.   // Dit is de hover functie op .star. Deze heeft 2 callback functies: onMouseOver en onMouseOut
  6.  
  7.     $(this).animate({'width': '+=50', 'height': '+=50'}, 400);
  8.     // Met jQuery kunnen we gewoon +=50 doen, we hoeven dit niet op te vragen.
  9.     // Als je dit wel wilt doen met bijv. de achtergrondkleur moet je gebruik
  10.     // maken van de jquery functie .css(): http://api.jquery.com/css
  11.  
  12.   }, function() {
  13.  
  14.     $(this).animate({'width': '-=50', 'height': '-=50'}, 400);
  15.  
  16.   });
  17.  
  18. });


Een goede screencast serie waarin je dit goed leert is jQuery for absolute beginners video series en het is ook handig als je de JavaScript basis kent: JavaScript from NULL
Bedankt door: Ibrahim, valles10, lolll
Offline lolll - 20/03/2011 16:27
Avatar van lolll Lid Maar moet ik dan voor elke star div die animate functie doen?
Want mijn bedoeling was om verschillende star div's te hebben, die enkel mogen vergroten wanneer je muis erover gaat. Daarom had ik ook aan die div een id meegegeven, maar hoe moet ik controleren op die id?
Of kan je nog altijd zoals in js een for-loop gebruiken?

Alvast bedankt voor je antwoord, Lolll
Offline WouterJ - 20/03/2011 16:37
Avatar van WouterJ HTML gevorderde Als je in jQuery een CSS class gebruikt werkt het voor elk element met die class. Kijk maar eens naar dit voorbeeld:
http://waldio.webatu.com/jquery/class.htm
Bedankt door: lolll
Offline lolll - 20/03/2011 17:20
Avatar van lolll Lid Oh, dat is wel heel gemakkelijk. Knap staaltje techniek  en gemakkelijk voor mij dan om te gebruiken.
Bedankt voor je voorbeeld en voor je snelle uitleg hoor.
Offline valles10 - 20/03/2011 17:35
Avatar van valles10 HTML interesse Duh, jQuery, "write less, do more"
Offline lolll - 20/03/2011 21:31
Avatar van lolll Lid Met de code die hierboven is gegeven, lukt er wel nog 1 ding niet:
Als ik met mijn muis snel enkele keren over mijn div star ga, dan blijft deze nadat ik allang met mijn muis van die div weg ben gewoon animeren. Weet iemand hoe ik dit kan voorkomen, want dat is wel tamelijk lastig dat het de hele tijd dan groter en kleiner wordt.
Lolll
Offline WouterJ - 21/03/2011 08:06
Avatar van WouterJ HTML gevorderde Dat kan met .stop(). De code wordt dan:
$(this).stop().animate({'css': 'hier'}, tijd);

Maar ik raad je echt aan die tutorial te volgen die ik je gaf, dan kan je het veel beter.
Bedankt door: lolll
Offline lolll - 23/03/2011 19:23 (laatste wijziging 23/03/2011 19:27)
Avatar van lolll Lid Bedankt voor alle antwoorden, het is ondertussen gelukt.

Hier is de eindcode die ik nu gebruik, mss kan iemand die later nog gebruiken:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var links=Array("construct.html","#","#","#");
  2. $(document).ready(function() {
  3. 	$(".star").hover(function(){
  4. 		$(this).stop().animate({
  5. 			width: '160px',
  6. 			height: '140px',
  7. 			top: '-25px',
  8. 			left: '-25px'
  9. 		}, 200);
  10. 		$(this).find('p').stop().animate({
  11. 			top: '33px',
  12. 			left: '48px',
  13. 			fontSize: '25px',
  14. 			fontWeight: 'bold'
  15. 		}, 200);
  16. 	},function(){
  17. 		$(this).stop().animate({
  18. 			width: '110px',
  19. 			height: '90px',
  20. 			top: '0',
  21. 			left: '0'
  22. 		}, 200);
  23. 		$(this).find('p').stop().animate({
  24. 			top: '23px',
  25. 			left: '36px',
  26. 			fontSize: '15px',
  27. 			fontWeight: 'normal'
  28. 		}, 200);
  29. 	});
  30. 	$(".star").click(function(){
  31. 		var id=$(this).find('p').attr('id');
  32. 		document.location='file:///C:/Users/****/Documents/****/' + links[id];/* Bij het online zetten moet dit nog aangepast worden.*/
  33. 	});
  34. });

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="content">
  2. 	<div class="star">
  3. 		<img src="pic/star.png" /><p id="0">Tekst</p>
  4. 	</div>
  5. 	<div class="star">
  6. 		<img src="pic/star.png" /><p id="1">Tekst</p>
  7. 	</div>
  8. 	<div class="star">
  9. 		<img src="pic/star.png" /><p id="2">Tekst</p>
  10. 	</div>
  11. 	<div class="star">
  12. 		<img src="pic/star.png" /><p id="3">Tekst</p>
  13. 	</div>
  14. </div>

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #content{
  2. 	position:relative;
  3. 	width:800px;
  4. 	margin-right:auto;
  5. 	margin-left:auto;
  6. 	border:1px solid #C00;
  7. }
  8. .star{
  9. 	float:left;
  10. 	position:relative;
  11. 	width:110px;
  12. 	height:90px;
  13. 	margin:25px;
  14. }
  15. .star img{
  16. 	width:100%;
  17. 	height:100%;
  18. }
  19. .star p{
  20. 	position:absolute;
  21. 	top:23px;
  22. 	left:36px;
  23. 	z-index:5;
  24. 	font-size:15px;
  25. 	font-weight:normal;
  26. }


Lolll
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.192s