login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Fade effect...

Offline Chilion - 27/10/2010 10:28
Avatar van ChilionMySQL interesse Hallo!

Ik wil graag dat een groen balkje met Gelukt boven aan de pagina weergeven wanneer een actie gelukt is. Nou is het zo dat dat balkje ook weer op moet donderen na 2 seconden.
Krijg dat voor elkaar, alleen, het gaat zo knetter hard. Ik wil eigenlijk dat hij wegfade zeg maar.

Ik heb nu dit:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. 			setInterval(disap, 2000);
  3. 			function disap()
  4. 			{
  5. 			  var een = document.getElementById('een');
  6.  
  7. 			  if(een.style.display == 'block')
  8. 			  {
  9. 			      een.style.display = 'none'
  10. 			  }
  11. 			}
  12. 			</script>
  13.  
  14.  
  15. 		<div id="een" style="display: block; background: #32A905; height: 40px; text-align:center; line-height: 40px; color: white; font-size:medium;">
  16. 			Gelukt!
  17. 		</div>

11 antwoorden

Gesponsorde links
Offline MrWolf - 27/10/2010 13:02
Avatar van MrWolf Lid Bekijk dit eens:
Voorbeeld
Source code (Klik eerst op het tabblad source code)
Offline valles10 - 27/10/2010 13:34
Avatar van valles10 HTML interesse of als je zin hebt in jQuery (uitbreiding op js) kan je fadeIn() gebruiken 
Offline Martijn - 28/10/2010 18:51
Avatar van Martijn Crew PHP jQuery is geen uitbreiding op JS hoor Het zijn scripts die werken in javascript. Dat een framework genoemd 

Maar het is zeker een aanrader, want als je dat hebt hoef je alleen maar dit te doen:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $("#een").fadeOut();
  2. //  of:
  3. $("#een").fadeOut('fast');
  4. $("#een").fadeOut('slow');
  5. $("#een").fadeOut(2000); // in milisec


en zo heb je ook fadein, en slideUp en slideDown en veel meer 
Offline WouterJ - 28/10/2010 19:07
Avatar van WouterJ HTML gevorderde Maar je kan ook
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('#een').animate({'opacity':0}, 2000); // in ms

doen.

Ik vind zelf de animate optie veel beter dan de fadeOut enzo.
Offline Flex1986 - 28/10/2010 19:14
Avatar van Flex1986 Gouden medaille

Senior Member		 Waldio, in welke vorm zou animate beter zijn?

Aangezien de fadeOut functie een directe verwijzing is naar animate en dus hetzelfde uitvoert ;)

Uit de jQuery source:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // Generate shortcuts for custom animations
  2. jQuery.each({
  3. 	slideDown: genFx("show", 1),
  4. 	slideUp: genFx("hide", 1),
  5. 	slideToggle: genFx("toggle", 1),
  6. 	fadeIn: { opacity: "show" },
  7. 	fadeOut: { opacity: "hide" }
  8. }, function( name, props ) {
  9. 	jQuery.fn[ name ] = function( speed, easing, callback ) {
  10. 		return this.animate( props, speed, easing, callback );
  11. 	};
  12. });


On topic, ik zou inderdaad ook gaan voor een framework zoals jQuery alhoewel er natuurlijk ook tegenhangers zijn die net zo goed werken. De belangrijkste reden is nog wel dat een framework meestal cross browser werkt wat een hoop problemen scheelt.
Bedankt door: valles10, buisje
Offline valles10 - 28/10/2010 21:24
Avatar van valles10 HTML interesse Wel ja, uitbreiding, framework 

Nu, als je echt niet met jQuery wil werken (ik zou niet weten waarom, maar laat ons stellen van wel), kan je door middel van een setInterval(functie(), 10); de tekst van z'n huidige kleur veranderen naar de kleur van de achtergrond. Dit met een kleine counter die dan een kleur uit een array haalt en dan als achtergrondkleur zet.

Dit is al heel ver gezocht, dus ik raad toch jQuery fadeIn() aan.
Offline WouterJ - 28/10/2010 22:48
Avatar van WouterJ HTML gevorderde
valles10 schreef:
ik zou niet weten waarom, maar laat ons stellen van wel

Omdat je voor jQuery een groot file moet inladen en als je het voor maar 1 simpel fadeIn'tje gebruikt het alleen nutteloos en traag is.
Offline Chilion - 29/10/2010 13:44
Avatar van Chilion MySQL interesse Ik heb het met een klein scriptje gedaan;

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. 			setInterval(disap, 1);
  3. 			function disap()
  4. 			{
  5. 			  var een = document.getElementById('succes');
  6.  
  7. 			      een.style.opacity = een.style.opacity - 0.001
  8. 			}
  9. 			</script>
  10.  
  11.  
  12. 		<div id="succes" style="opacity: 1;">
  13. 			Gelukt!
  14. 		</div>
Offline Aar - 29/10/2010 14:35
Avatar van Aar PHP interesse
Waldio schreef:
[..quote..]
Omdat je voor jQuery een groot file moet inladen en als je het voor maar 1 simpel fadeIn'tje gebruikt het alleen nutteloos en traag is.

..die vervolgens gecached word.
Offline valles10 - 29/10/2010 17:23
Avatar van valles10 HTML interesse
Chilion schreef:
Ik heb het met een klein scriptje gedaan;

[..code..]

kan, maar werkt niet overal, test maar uit;)
Offline Martijn - 31/10/2010 13:26
Avatar van Martijn Crew PHP Chilion, je moet die setinterval in een var zetten (var fader = setInterval()) en dan in je functie if(opacity===0) clearInterval(fader);

Op jouw manier gaat de site er mee stoppen na een paar klikjes 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.233s