afficher une div après que son contenu est chargé

J'ai un div sur mon site Web qui contient des images, des textes et des liens. C'est un carrousel. Ce que j'essaye de faire est d'afficher le div après que tout le contenu est chargé. Je veux utiliser l'opacité 0 siwtch à l'opacité 1, avec un effet de fondu.afficher une div après que son contenu est chargé

ici est mon html:

<div id="slideshow"> 

    <div id="carousel"> 

     <li><a href="en/article-1/"><img width="657" height="394" src="wp-content/uploads/41.jpg" class="image_slideshow wp-post-image" alt="4" nopin="nopin" /></a><div class="legende">&nbsp;</div></li> 

     <li><a href="en/article-3/"><img width="657" height="394" src="wp-content/uploads/21.jpg" class="image_slideshow wp-post-image" alt="2" nopin="nopin" /></a><div class="legende">&nbsp;</div></li> 

     <li><a href="en/article-4/"><img width="657" height="394" src="wp-content/uploads/11.jpg" class="image_slideshow wp-post-image" alt="1" nopin="nopin" /></a><div class="legende">&nbsp;</div></li> 

     <li><a href="en/article-5/"><img width="795" height="476" src="wp-content/uploads/6.jpg" class="image_slideshow wp-post-image" alt="6" nopin="nopin" /></a><div class="legende">&nbsp;</div></li> 

    </div> 

    <ul id="carousel-descriptions"> 

     <li class="desc">This is article 1</li> 

     <li class="desc">This is article 3</li> 

     <li class="desc">this is article 4</li> 

     <li class="desc">this is article 5</li> 

    </ul> 

    <div id="carousel-controls"> 


     <span class="control"></span> 


     <span class="control"></span> 


     <span class="control"></span> 


     <span class="control"></span> 


    </div> 

    <div class="prev_slide"> 

     <img src="../../../wp-content/uploads/structure/prev.jpg"> 

    </div> 

    <div class="next_slide"> 

     <img src="../../../wp-content/uploads/structure/next.jpg"> 

    </div> 

</div>

J'ai essayé quelque chose comme ça, mais il ne fonctionne pas:

$(document).ready(function() { 
    $('#slideshow').css('opacity','0'); 
     $('#slideshow').load(function() { 
    $(this).css('opacity','1'); 
    }); 
}

est-il un moyen de le faire? avec fondu pour afficher la div. je ne peux pas utiliser l'affichage aucun parce que mon carrousel besoin d'être affiché pour travailler

Merci beaucoup pour votre aide

Source

2014-04-21 mmdwc

mis son visibility-hidden dans son attribut de style dans les balises html, puis utilisez ceci:

<div id="slideshow" style="visibility:hidden;"> 


$(window).load(function() { 
    $('#slideshow').css('visibility','visible'); 
}

$(window).load attend jusqu'à ce que toutes les images sont chargées

ou vous pouvez consulter le poste de THIS gars, où il partage un plugin qui pr Interdiction ws attente d'une des images de l'élément spécifique pour charger

Source

2014-04-21 18:44:34 Banana

merci @ Banana, je sais comment utiliser la fonction window.load, mais est-il possible de remplacer $ (window), par $ (# slideshow)? Je ne veux pas attendre jusqu'à ce que toute la fenêtre soit chargée, mais seulement le #slideshow ... je ne sais pas si c'est possible ou s'il y a un moyen de le faire, merci – mmdwc

oui, j'ai mis à jour ma réponse – Banana

quelques options ici qui vous donnent le fondu en tout en évitant display:none;:

<div id="slideshow">...</div>

En utilisant l'opacité:

$(document).ready(function() { 
    $('#slideshow').css('opacity',0).animate({opacity:1}, 1000); 
});

utilisation de la visibilité:

$(document).ready(function() {  
    $('#slideshow').css('visibility','visible').hide().fadeIn('slow'); 
});

Références: jquery fade element does not show elements styled 'visibility: hidden'

Source

2014-04-21 19:00:56 StvnW

afficher une div après que son contenu est chargé

Répondre

Questions connexes