web-dev-qa-db-fra.com

JQuery Visible Show

J'ai le code suivant:

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

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

Pour une raison inconnue lorsque j'utilise le CSS, cela fonctionne!

Mais quand j'utilise .show ();

Ça ne marche pas. S'il vous plaît bien vouloir 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>

J'ai essayé ceci:

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

Ensuite:

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

Et toujours pas pour une raison quelconque!

EDIT: Ce qui est bizarre, c’est que ça marche pour tous les autres DIV !!

jqueryvisibility
25
iTEgg

Utilisez display:none; au lieu de visibilité

Cela fonctionne bien pour moi

$(function(){   

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

});​

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

26
Shyju

les fonctions .show() et .hide() de jQuery fonctionnent uniquement sur la propriété CSS display et non sur la propriété visibility. Je viens de vérifier le code source de jQuery 1.7 et de vérifier que c'est bien le cas.

Donc, .css('display', 'none') serait associé à .show().

Si vous souhaitez modifier la visibilité, il vous suffit de modifier directement le css ou de créer vos propres méthodes hideV() et showV() pour le faire à votre place:

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

jQuery.fn.hideV = function() {
    this.css('visibility', 'hidden');
}
38
jfriend00

jQuery .show() requiert la propriété display:none css

3
Hemal

Je me contenterais de mettre visibility: hidden; sur l'élément, puis d'utiliser .css("visibility", "visible"); pour le montrer, car il occupe toujours de la place sur la page.

Cela évitera les pages agitées lors du chargement et le redoutable flash de contenu invisible ( FOUC ).

1
sanjsanj
<!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
Vipin Pandey