Mon site utilise Google Maps. La carte elle-même devrait être affichée une fois complètement chargée. C'est là que fadeIn () devrait commencer à augmenter l'opacité de 0 à 100%.
Pour une raison quelconque, fadeIn () ne fait rien, alors que fadeTo () fonctionne pour moi. J'ai utilisé fadeIn avant mais je ne l'ai jamais vu se comporter de cette façon - peut-être que je regardais la documentation depuis trop longtemps.
var map = new google.maps.Map(document.getElementById('map'),
{
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
google.maps.event.addListenerOnce(map, 'idle', div_fadein);
// Don't invoke callback on *every* map move
function div_fadein()
{
$("#map").fadeTo(600, 1); // <-- Works
//$("#map").fadeIn(800); // <-- Doesn't work
}
#map
{
height: 350px;
width: 500px;
border: 1px solid black;
opacity: 0;
filter: alpha(opacity=0); /* For IE8 and earlier */;
}
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>
2 réponses
La différence réside dans la manière dont ces deux fonctions gèrent les propriétés d'affichage de l'élément div.
FadeTo: affiche d'abord l'élément, puis l'anime
return this.filter( isHiddenWithinTree ).css( "opacity", 0 ).show()
// Animate to the value specified
.end().animate( { opacity: to }, speed, easing, callback );
FadeIn: affiche l'élément avec l'animation
jQuery.fn[ name ] = function( speed, easing, callback ) {
return this.animate( props, speed, easing, callback );
};
Source: https://github.com/jquery/jquery/blob/ 731c501155ef139f53029c0e58409b80f0af3a0c / src / effets.js
La carte Google doit être affichée dans un élément visible, sinon elle affichera un comportement inattendu, ce qui se produit en cas de fondu.
On dirait que pour que fadeIn fonctionne, il repose sur l'affichage aucun pour être défini. donc parce que le résultat final après l'animation n'est pas opacity = 1; votre div n'est toujours pas viable.
À la fin de l'animation avec fadeIn, l'affichage est réglé sur bloquer et cela afficherait correctement votre div. Y a-t-il une raison pour laquelle vous ne pouvez pas utiliser fadeTo?
Questions connexes
De nouvelles questions
jquery
jQuery est une bibliothèque JavaScript, pensez également à ajouter la balise JavaScript. jQuery est une bibliothèque JavaScript multi-navigateur populaire qui facilite la traversée du Document Object Model (DOM), la gestion des événements, les animations et les interactions AJAX en minimisant les écarts entre les navigateurs. Une question marquée jQuery doit être liée à jQuery, donc jQuery doit être utilisée par le code en question et au moins les éléments liés à l'utilisation de jQuery doivent être dans la question.