FadeIn vs FadeTo

Question

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>

jquery html css

1

user2286339 25 août 2017 à 17:40

Answer 1

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.

2

Nagarjun 29 août 2017 à 12:00

Answer 2

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?

2

TyBourque 25 août 2017 à 14:57

FadeIn vs FadeTo

2 réponses

Questions connexes

De nouvelles questions

jquery