JavaScript가 Message (div) 아래로 약간 이동합니까?

Question

내부 픽셀이있는 div를 일부 픽셀 아래로 이동하는 방법이 있습니까? (아마도 jQuery 또는 w/e 사용)

stackoverflow가 노란색 메시지 (뱃지)를 보여줄 때와 같은 효과가 있습니다. 그러나 페이지의 나머지 부분을 모두 움직이지 않고도 그 효과가 필요합니다.

예 :

시를

http://img690.imageshack.us/img690/7324/senzatitolo2mb.jpg

(메시지가 아래로 이동하는 동안 나도 페이드 효과를 추가 할 것입니다). 될 수있는 메시지를 고려하시기 바랍니다 1 개 이상 jQuery로

Answer 1

이이 같이 할 것 (다만 상단의 유래와 같은) :

<div id="message">Some message</div> 
$("#message").slideDown(500); //where 500 is the time effect in miliseconds.. 

온라인 데모 : jQuery를 효과에 대한 http://jsfiddle.net/NzPfM/

괜찮다 더 여기 : http://api.jquery.com/category/effects/

동시에 아래로 슬라이드하고 페이드 인하려면, 대신 .animate()를 사용하십시오 :

$("#message").animate({height:"30px", opacity:1 },500); 

온라인 데모 : http://jsfiddle.net/NzPfM/1/

이 업데이트 : 당신은 CSS에서 position:absolute을 사용할 수 있습니다 애니메이션 동안 다른 콘텐츠를 이동하지 않도록하려면 데모 아래 참조 : 피

데모 아래로 밀어 :http://jsfiddle.net/NzPfM/2/

Answer 2

div를 position:absolute으로 설정 한 다음 u로 애니메이션을 만들 수 있습니다. jQuery.animate을 불러 top 스타일을 변경하십시오.

여기 jQuery.animate에 대해 읽어 : http://api.jquery.com/animate/이

당신은 여기에 간단한 예를 볼 수 있습니다 http://jsfiddle.net/NsxTa/

참고 : slideDown 실제로 아래로 제자리를 숨기고에서 전체 사업부를 미끄러 사용하는 것이 아니라이 방법 여기서 slideDown은 정적으로 배치 된 콘텐츠를 나타냅니다.이 페이지는 정말로 awefull입니다.

Answer 3

페이지가 position-absolute 인 일부 컨테이너 내에 있지 않은 것으로 가정하면 에 contai 몸의 주먹 인 것처럼 요소는 페이지의 나머지 부분을 전부 렌더링합니다. (컨테이너 - HTML이 포함 된 모든 HTML 태그, 일반적으로 DIV).

http://jsfiddle.net/osher/ByngB/

이 (가) 메시지의 닫기 버튼에 "제거"연결 메시징 이벤트에 "추가"를 연결하거나 서버 에 렌더링 :

이

는 순수 자바 스크립트를 사용하여 예입니다 bar 그리고 그게 전부예요 :)

function $e(s){ return document.getElementById(s) } 

function add(){ 
    var d = document.createElement("div"); 
    d.innerHTML = "your message: " + $e("txt").value; 
    document.body.insertBefore(d, document.body.firstChild); 
} 

function remove(){ 
    // assuming that your page content is wrapped in a div with ID="content" 
    if (document.body.firstChild.id == "content") return; 

    document.body.removeChild(document.body.firstChild); 
}