web-dev-qa-db-fra.com

Jquery-Comment estomper l'arrière-plan tout en montrant l'icône de chargement dessus

J'essaie de griser l'arrière-plan lorsqu'un utilisateur clique sur le bouton Envoyer et affiche l'icône de chargement sur l'arrière-plan grisé.

ci-dessous est l'icône que j'essaie de montrer, mais je ne suis pas en mesure de montrer l'animation, l'icône reste immobile.

enter image description here

Voici mon html:

 <div class="container"></div>
 <div id="loading-img" style=" z-index: 20;display:none;"></div>
 <button id="button">Submit</button>

JS:

 $("#button").click(function() {
    $("#container").css("opacity",0.5);
    $("#loading-img").css({"display": "block"});
}

Je ne sais pas exactement comment utiliser le fichier css pour animer l'icône sur un fond gris. Des idées s'il vous plaît ?? MODIFIER::::

Violon: http://jsfiddle.net/hnk6bLbt/1/

Merci!

javascriptjqueryhtmlcss
25
user1234

J'ai retravaillé l'exemple que vous avez fourni dans le violon js: http://jsfiddle.net/zravs3hp/

Étape 1 :

J'ai renommé votre container div en overlay, car ce div n'est sémantiquement pas un conteneur, mais une superposition. J'ai également placé la div loader en tant qu'enfant de cette div superposée.

Le code HTML résultant est:

<div class="overlay">
    <div id="loading-img"></div>
</div>


<div class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit. ...</div>
    <button id="button">Submit</button>
</div>

Le css de la superposition est le suivant

.overlay {
    background: #e9e9e9;  <- I left your 'gray' background
    display: none;        <- Not displayed by default
    position: absolute;   <- This and the following properties will
    top: 0;                  make the overlay, the element will expand
    right: 0;                so as to cover the whole body of the page
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

Étape 2 :

J'ai ajouté du texte factice afin d'avoir quelque chose à superposer.

Étape 3 :

Ensuite, dans le gestionnaire click, il suffit de montrer la superposition:

$("#button").click(function () {
    $(".overlay").show();
});
39
Michael P. Bazos

Remarque: pour répondre à votre question, il n’est pas magique d’animer un gif: c’est un gif animé ou non. Si le gif n'apparaît pas, il est fort probable que le chemin d'accès au gif est mauvais. Si le gif existe mais n’anime pas, voir les liens de référence tout au bas de cette réponse.

L'affichage de la superposition gif +, cependant, est plus facile que vous ne le pensez.

Tout ce dont vous avez besoin, c'est de deux DIVs à position absolue: un div superposé et un div contenant votre gif de chargement. Les deux ont un index z supérieur au contenu de votre page, ils superposeront donc la page lorsqu'ils sont visibles.

Lorsque le bouton est enfoncé, affichez ces deux divs. C'est ça!

démo jsFiddle

HTML: 

<div id="myOverlay"></div>
<div id="loadingGIF"><img src="http://placekitten.com/50/49" /></div>
<button id="button">Submit</button>

javascript/jQuery: 

$("#button").click(function() {
    $('#myOverlay').show();
    $('#loadingGIF').show();
    setTimeout(function(){
        $('#myOverlay').hide();
        $('#loadingGIF').hide();
    },3000);
});

CSS: 

#myOverlay{position:absolute;height:100%;width:100%;}
#myOverlay{background:black;opacity:.7;z-index:2;display:none;}
#loadingGIF{position:absolute;top:40%;left:45%;z-index:3;display:none;}

Les références:

http://www.paulirish.com/2007/animated-gif-not-animating/

Le GIF animé pendant le chargement de la page ne s'anime pas

https://wordpress.org/support/topic/animated-gif-not-working

http://forums.mozillazine.org/viewtopic.php?p=987829

5
cssyphus

1) "conteneur" est une classe et non un ID 2) .container - définit z-index et display: aucun dans votre CSS et non inline sauf s'il existe une très bonne raison de le faire. Démo @ violon

$("#button").click(function() {
    $(".container").css("opacity", 0.2);
   $("#loading-img").css({"display": "block"});
});

CSS:

#loading-img {
    background: url(http://web.bogdanteodoru.com/wp-content/uploads/2012/01/bouncy-css3-loading-animation.jpg) center center no-repeat;  /* different for testing purposes */
    display: none;
    height: 100px; /* for testing purposes */
    z-index: 12;
}

Et un démo avec image animée .

1
lshettyl