2010-12-08 30 views
10

dans mon css j'ai mis quelques éléments visibiliy: caché, comment puis-je les montrer?jQuery: si ma visibilité css: cachée, comment puis-je faire apparaître mes éléments?

Je l'ai fait avant avec l'opacité, mais j'ai un bug dans IE:

var i = 0; 
$mySelection.each(function(i) { 
    $(this).delay((i * 100) + ($mySelection.length)).animate(
     { opacity: "1"}, 
     {queue:true, duration:1000, easing:"quartEaseIn"} 
    ); 
}) 

Comment puis-je faire si je veux la visibilité controll avec jQuery au lieu d'opacité? merci

+0

Pouvez-vous nous donne une mise à jour si vous avez ce dont vous avez besoin? Si non, pourriez-vous nous donner plus de détails? – cspolton

Répondre

-3

Essayez

$mySelection.show(); 
+2

Ne fonctionne pas; jQuery show() définit la propriété CSS 'display', n'affecte pas 'visibility'. –

3

Plutôt que d'utiliser visibility: hidden, utilisez display:none, alors si vous voulez effacer dans votre élément caché, utilisez fadeIn. Par exemple:

$("div:hidden").fadeIn("slow"); 

Edit: Étant donné que vous souhaitez utiliser la visibilité, essayez ceci:

var i = 0; 
$mySelection.each(function(i) { 
    $(this).delay((i * 100) + ($mySelection.length)).css(
     { 'opacity': '0', 'visibility': 'visible'}).animate(
      { opacity: "1"}, 
      {queue:true, duration:1000, easing:"quartEaseIn"}); 
}); 
+3

Pourquoi devrait-il passer à 'display'? 'visibility' se comporte totalement différemment. – jwueller

+0

Je l'ai présenté comme une alternative pour simplifier l'animation. Réalisez que 'display: none' supprime complètement l'élément de la vue plutôt que de le cacher. – cspolton

+0

l'utilisation de la visibilité (sujet de la question) est à des fins différentes. – Genaut

36
$(":hidden").css("visibility", "visible"); 
2

J'ai utilisé ce code pour modifier l'attribut de visibilité CSS avec Jquery. Où l'élément1 sur hover va changer la visibilité de element2.

A fait deux script différent pour le même élément pour donner un effet mouseover-mouseleave.

<script>$(document).ready(function(){ 
$(".element1").mouseover(function(){ 
    $(".element2").css("visibility","visible"); 
}); 

});

  <script>$(document).ready(function(){ 
$(".element1").mouseleave (function(){ 
    $(".element2").css("visibility","hidden"); 
}); 

}); Note.- Que Element2 celui qui est affecté par CSS, à l'origine est caché. donc quand la souris est sur Element1, Element2 apparaît. Lorsque la souris quitte element1, Element2 se cache à nouveau. Hope it helps

-Expiriance de ce code reaserching et le mélange d'autres codes d'utilisateurs en débordement de la pile