CSS/jquery si() effet css

Question

Je ne sais pas pourquoi cela ne fonctionne pas ...

J'ai plusieurs DIVs avec une classe de .rightColumnButton. Certains d'entre eux ont une hauteur de 30px:

.rightColumnButton{ 
height:30px; 
width:206px; 
margin-top:20px; 
} 

Je souhaite modifier la marge supérieure à 10px si elles ont une hauteur de 30px:

$(function(){ 

if($('.rightColumnButton').css("height") == "30"){ 
    $(this).animate({marginTop: "10px"}, 500); 


    }  
}); 

ne fonctionne pas pour moi.

Answer 1

L'utilisation de css('height') renvoie également l'unité, qui est généralement «px». Donc, dans ce cas, vous comparez '30px' == '30'. Utilisez la méthode height() qui renvoie une valeur numérique et la compare à un nombre entier.

De même, vous ne spécifiez pas l'objet que vous souhaitez animer, car l'élément n'est pas porté dans la clause if. Utilisez la méthode each() sur l'élément pour créer une fermeture:

$(function(){ 
    $('.rightColumnButton').each(function() { 
     if($(this).height() == 30) { 
      $(this).animate({marginTop: "10px"}, 500); 
     }  
    }); 
}); 

EDIT

Au lieu d'écrire dans les commentaires, je pensais que je me préciser ici. Je suppose que votre but est d'animer tous les éléments qui ont une hauteur de 30px. Dans votre message original, vous avez eu ceci:

if($('.rightColumnButton').css("height") == "30"){ 

qui ne sélectionner tous les » .rightColumnButtons' Allright, mais lorsque vous utilisez l'appel css("height"), vous obtenez seulement la hauteur du premier élément. Si votre code avait fonctionné, il aurait animé tous les div seulement si le premier div avait eu une hauteur de 30px.

C'est là que la méthode each() est pratique. Il boucle chaque élément de la sélection et compare les hauteurs indépendamment les unes des autres et les anime si nécessaire.

Answer 2

Que pensez-vous de cela?

$(function(){ 
    if($('.rightColumnButton').css("height") == "30px"){ 
     $(this).animate({marginTop: "10px"}, 500); 
    }  
}); 

Si cela ne fonctionne pas, essayez de mettre une alerte pour le contenu:

$('.rightColumnButton').css("height") 

... et coller ici le résultat.

Answer 3

this n'est pas spécifié

$(function(){ 
    $('.rightColumnButton').each(function(){ 
     if($(this).css("height") == "30"){ 
      $(this).animate({marginTop: "10px"}, 500); 
     } 
    } 
    ); 
}); 

Answer 4

la méthode css() retournera une chaîne avec des unités, dans votre cas '30px';

donc vous devez vérifier

$('.rightColumnButton').css("height") == "30px" 

ou utiliser la fonction hauteur():

$('.rightColumnButton').height() == 30 

Vous devez également définir this avant d'animer.

var col = $('.rightColumnButton'); 
if (col.height() == 30) { 
    col.animate({marginTop: "10px"}); 
} 

Answer 5

Je pense que le problème est que le $ (« rightColumnButton ») BAE ... retourne une collection de valeurs, et votre cas est comaring que à 30.

Essayez quelque chose comme ça à la place.:

$("rightColumnButton").each(function (i) { 
    if (this.height == 30) 
     $(this).animate({marginTop: "10px"}, 500); 
}