Waarom werkt mijn jQuery niet als ik externe pagina's gebruik

Ik gebruik jQuery om te laden in 2 externe pagina's, de ene met de naam search.php en de andere met de naam info.php. Ik toon ze elk op een enkele pagina met de naam user.php, maar alleen wanneer er op de koppeling is geklikt in de navigatiebalk. Helaas ondervind ik momenteel een probleem, wanneer ik dit gedeelte van het script gebruik:

$(document).ready(function() {
$('#content_area').load($('.menu_top:first').attr('href'));
});


$('.menu_top').click(function() {
var href = $(this).attr('href');
$('#content_area').hide().load(href).fadeIn('normal');

return false;
});

Mijn pagina lijkt te flikkeren en blijft 2 seconden hangen voordat de inhoud wordt gewijzigd. Ik heb het opgemerkt. Maar als ik de .hide en fadeIn verwijder, lijkt het goed te werken. Hoe kan ik de fade-in nog steeds gebruiken maar de kraam en flikkering elimineren?

2

3 antwoord

jQuery voegt .fadeIn, .hide en andere effecten toe aan de wachtrij van het effect. Dus het roept .load() direct op GEWOON NA het stuurt de .hide naar de wachtrij van het effect/en de .hide is niet voltooid.

U kunt een callback uitvoeren op de methode .hide:

$('#content_area').hide(function(){
    $('#content_area').load(href).fadeIn('normal');
})

Hierdoor kan hide als eerste eindigen.

2
toegevoegd

probeer te experimenteren met .stop om te zien of dit helpt bij flikkeringen:

$('#content_area').hide().stop(true,true).load(href).stop(true,true).fadeIn('normal');
1
toegevoegd

for flickering use animate instead of fadeIn or fadeOut

voor fadeout

  $("youeSelector").animate({ opacity: 0 }, 'slow');

voor fadein

  $("youeSelector").animate({ opacity: 1 }, 'slow');

en zorg er voor het tweede probleem voor dat je de scriptbestanden niet twee keer opneemt

0
toegevoegd