login  Naam:   Wachtwoord: 
Registreer je!
 Forum
Zoeken  Regels  Help
Categorieën > Grafisch

Fade effect...

Chilion – 27/10/2010 10:28
Offline offline




MySQL 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:
  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>


Pagina:

11 antwoorden

Gesponsorde links
Daisycon - Verdien geld met uw website

MrWolf – 27/10/2010 13:02
Offline offline



Lid
Bekijk dit eens:
Voorbeeld
Source code (Klik eerst op het tabblad source code)

valles10 – 27/10/2010 13:34
Offline offline



PHP interesse
of als je zin hebt in jQuery (uitbreiding op js) kan je fadeIn() gebruiken 

Martijn – 28/10/2010 18:51
Offline offline



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:

  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 

WouterJ – 28/10/2010 19:07
Offline offline



HTML gevorderde
Maar je kan ook
  1. $('#een').animate({'opacity':0}, 2000); // in ms


doen.

Ik vind zelf de animate optie veel beter dan de fadeOut enzo.

Flex1986 – 28/10/2010 19:14
Offline offline



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:

  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.

valles10 – 28/10/2010 21:24
Offline offline



PHP 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.

WouterJ – 28/10/2010 22:48
Offline offline



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.

Chilion – 29/10/2010 13:44
Offline offline



MySQL interesse
Ik heb het met een klein scriptje gedaan;

  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>

Aar – 29/10/2010 14:35
Offline offline



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.

valles10 – 29/10/2010 17:23
Offline offline



PHP interesse
Chilion schreef:
Ik heb het met een klein scriptje gedaan;

[..code..]

kan, maar werkt niet overal, test maar uit;)

Gesponsorde links


Pagina:

Dit onderwerp is gesloten.
Actieve forumberichten:

© 2002-2012 Sitemasters.be - Regels - Gehost door: Vircon - Laadtijd: 0.096s