login  Naam:   Wachtwoord: 
Registreer je!
 Forum

JQuery - pagina laden NA animatie (Opgelost)

Offline Nielzie - 23/11/2011 22:45 (laatste wijziging 23/11/2011 22:45)
Avatar van NielzieLid Hey allen,

voor een website zou ik een grote afbeelding moeten hebben waarop mensen moeten klikken. Wanneer ze dit doen, gaat de afbeelding weg met een fadeOut en wordt er een nieuwe pagina geladen.

Met JQuery had ik dit als volgt geprobeerd:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2.  
  3. $(document).ready(function() {
  4.     $('a[rel="external"]').click( function() {
  5. 		$(this).fadeOut('slow', function() {
  6. 			window.open( $(this).attr('href') );
  7. 		});
  8. 	});
  9. });
  10. </script>


En dan in de body de afbeelding waarop men zou klikken:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="home.html" rel="external"><img src="images/intro.jpg" border="0" /></a>


Echter opent de pagina meteen, zonder dat mijn fadeOut is afgelopen.
Iemand enig idee hoe ik dit kan oplossen?

Alle hulp wordt geapprecieerd.

Niels

3 antwoorden

Gesponsorde links
Offline vinTage - 23/11/2011 23:07
Avatar van vinTage Nieuw lid In de jQuery ready ken je de click event toe, maar in de window.onload pas de rest.

Of je mikt je js script helemaal onderin je pagina, dat het dus pas na de afbeelding geladen wordt.
Bedankt door: Nielzie
Offline lemoinet - 24/11/2011 00:05
Avatar van lemoinet PHP gevorderde ik denk dat je nog return false moet toevoegen.

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script>
  2. $(document).ready(function() {
  3.     $('a[rel="external"]').click( function() {
  4.         $(this).fadeOut('slow', function() {
  5.             window.open( $(this).attr('href') );
  6.         });
  7.         return false;
  8.     });
  9. });
  10. </script>
Bedankt door: Nielzie
Offline Martijn - 24/11/2011 15:09
Avatar van Martijn Crew PHP
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $('[rel="external"]').live('click',function(e){
  2.     e.preventDefault();
  3.     $(this).fadeOut('slow',function(){
  4.          window.open( $(this).attr('href') );
  5.     });
  6. })


De false kan, de e.preventDefault() is wat netter. Mocht je het vervangen door een ander element, dan werkt dit nogsteeds 
Verder heb je best kans dan window.open niet erg support wordt, aangezien het een vorm van popup is 
Bedankt door: Nielzie
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.171s