JQuery Voir

J'ai le code suivant:

$('#loading').css("visibility", "visible");

$('#loading').show();

Pour une raison inconnue pour moi quand j'utilise le CSS ça marche!

Mais quand j'utilise .afficher ();

Ça ne marche pas. Nous vous remercions de nous aider. Je suis un nouveau à JQuery.

Je vous Remercie.

Modifier: 

<div class="footerOrder" id="loading" style="visibility:visible;">
      <img src="../utils/loadingExistenz.gif" width="32" height="32" border="0" />
</div>

Essayé ceci:

<div class="footerOrder" id="loading" style="display:block;">

Puis: 

$('#loading').hide();

Et toujours pas aller pour une raison quelconque!

EDIT: chose étrange, c'est que cela fonctionne pour toutes les autres DIVs!!

23
demandé sur iTEgg 2012-03-18 01:29:22

6 réponses

Utiliser display:none; au lieu de visibilité

Cela fonctionne très bien pour moi

$(function(){   

    $("#aLink2").click(function(){
        $('#loading').show();
    });  

});​

Échantillon de Travail : http://jsfiddle.net/HShHg/6/

26
répondu Shyju 2012-03-17 21:36:10

Les .show() et .hide() de JQuery fonctionnent uniquement sur la propriété CSS display, pas sur la propriété visibility. Je viens de vérifier le code source jQuery 1.7 et vérifié que c'est le cas.

Donc, {[5] } serait apparié avec .show().

Si vous voulez changer la visibilité, vous devez simplement changer le css directement ou créer vos propres méthodes hideV() et showV() pour le faire pour vous: 

jQuery.fn.showV = function() {
    this.css('visibility', 'visible');
}

jQuery.fn.hideV = function() {
    this.css('visibility', 'hidden');
}
37
répondu jfriend00 2012-03-17 21:43:44

Selon les docs:

.show() This is roughly equivalent to calling .css('display', 'block')

Donc, si vous avez foiré avec le visibility, cela ne vous aidera pas.

Ce que vous devez faire est de toujours cacher avec .css('display', 'none') ou de .hide()

Je viens de trouver ceci utile docs :

Les éléments avec visibility: hidden ou opacity: 0 sont considérés comme visibles, car ils consomment toujours de l'espace dans la mise en page.

5
répondu gdoron 2012-03-17 21:41:21

JQuery .show() nécessite d'avoir display:none propriété css

3
répondu Hemal 2017-02-02 08:02:37

Je m'en tiendrais à mettre visibility: hidden; sur l'élément, puis utiliser .css("visibility", "visible"); montrer précisément parce qu'il prend toujours place sur la page.

Cela évitera les pages nerveux pendant le chargement et le flash redouté de contenu Invisible (FOUC ).

1
répondu sanjsanj 2017-02-02 08:00:14 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div#sidebar-collapses').click(function(){
  if ( $("#title").is(":hidden") ) { 
    $("#title").show(); 
  } else if ( $("#title").is(":visible") ) { 
    $("#title").hide(); 
  }
})

});
</script>
</head>
<body>
<div class="sidebar-collapse" style="" id="sidebar-collapses">
     <a href="#" class="sidebar-collapse-icon with-animation">
         Test              
         <i class="menu"></i>
     </a>
 </div>
 <a href="mysite_url" id="title" style="display:none;"> <br> My Site Name </a>

</body>
</html>
0
répondu Vipin Pandey 2017-05-20 13:34:53