애니메이션 CSS 속성 : "최고"를 "아래"

Question

업데이트 2

내가 그것을 알아 냈에서. 비슷한 문제가있는 사람은 내 대답을 참조하십시오.

업데이트

jsFiddle : http://jsfiddle.net/HBUAx/

포스트

내가 jQuery로 몇 애니메이션에서 일하고 있어요. 나는 3-4 개의 요소를 가지고 있는데 위에서부터 밀어 넣어야합니다. 내가 그들을 숨기고 "상단에서 슬라이드 만들기 위해

top: -1000px 

에 CSS 값을 조작 할 수있는 원인

#element-1 { 
    top:124px; 
    left:0px; 
    right:auto; 
    bottom:auto; 
} 

#element-2 { 
    top:230px; 
    left:670px; 
    right:auto; 
    bottom:auto;   
} 

#element-3 { 
    top:auto; 
    left:0px; 
    right:auto;  
    bottom:100px; 
} 

가 그럼 난, pageload의 초기 자신의 위치를 ​​저장합니다 내가 CSS로 자신의 위치를 ​​정의 "가능한 애니메이션.

var image_margins = []; 
$('img').each(function() { 
    var obj = $(this), 
     id = obj.attr('id'), 
     mtop = obj.css('top'), 
     mleft = obj.css('left'), 
     mright = obj.css('right'), 
     mbottom = obj.css('bottom'); 

    // save alle margins in array 
    image_margins[id] = {mtop:mtop,mleft:mleft,mright:mright,mbottom:mbottom}; 

    // hide all content elements 
    obj.css({'top':'-1000px'}); 

}); 

사용자가 애니메이션 버튼을 클릭하면 요소가 저장된 위치로 이동해야합니다. 문제 : top 특성을 제거 할 수 없습니다. 일부 요소에는 아래쪽 여백 만 있습니다. top을 auto 또는 ''으로 설정하려고했지만 DOM 검사기에서는 항상 0px입니다. top이 설정된 경우 bottom이 작동하지 않습니다. top 속성을 제거하려면 어떻게해야합니까?

$('.button').click(function(){ 
    $('img').each(function() { 
     var image = $(this), 
      id = image.attr('id'), 
      timeout = 0; 

     setTimeout(function() { 
      var mtop, mleft, mright, mbottom; 
      if (image_margins[id].mtop != 'auto') { mtop = image_margins[id].mtop; } else { mtop = ''; } 
      if (image_margins[id].mleft != 'auto') { mleft = image_margins[id].mleft; } else { mleft = ''; } 
      if (image_margins[id].mright != 'auto') { mright = image_margins[id].mright; } else { mright = ''; } 
      if (image_margins[id].mbottom != 'auto') { mbottom = image_margins[id].mbottom; } else { mbottom = ''; } 
      image.animate({'top':mtop,'left':mleft,'right':mright,'bottom':mbottom},500); 

     },timeout); 
     timeout = timeout + 200; 
    }); 
}); 

Answer 1

좋아요, 알아 냈습니다. 요소에 정의 된 top 위치가 있는지 확인해야합니다. 그렇지 않다면 큰 bottom 값으로 숨겨야합니다.

은 참조 : http://jsfiddle.net/gg33z/1/는

Answer 2

이 시도 :이 "최고"값 설정을 해제해야

$(element).css('top', ''); 

.