카테고리 없음

[jquery] CSS / jquery if () CSS 효과

행복을전해요 2020. 12. 29. 15:10

Using css('height') returns also the unit, which usually is 'px'. So in this case, you're comparing '30px' == '30'. Use the height() method which returns a numerical value and compare that to an integer.

Also, you are not specifying what object you want to animate, as the element doesn't get 'carried' inside the if clause. Use the each() method on the element to create a closure:

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

EDIT

Instead of writing in the comments, I thought I'd clarify myself here. I assume your point is to animate all elements that have a height of 30px. In your original post, you had this:

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

That does select all '.rightColumnButtons' allright, but when you use the css("height") call, you are getting only the height of the first element. If your code had worked, it would have animated all of the divs only if the first div had had a height of 30px.

That is where the each() method comes in handy. It loops through every element in the selection and compares the heights independently of each other and animates if necessary.

-------------------

the css() method will return a string with units, in your case '30px';

So you have to check for

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

or use the height() function:

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

this애니메이션하기 전에 정의해야합니다 .

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

this 지정되지 않음

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

이것은 어떤가요 ?

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

작동하지 않으면의 내용에 대한 경고를 넣어보십시오.

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

... 여기에 결과를 붙여 넣습니다.

-------------------

문제는 $ ( 'rightColumnButton'). css ...가 값 모음을 반환하고 if가 30으로 comaring한다는 것입니다.

대신 다음과 같이 시도하십시오.

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


출처
https://stackoverflow.com/questions/2000578