부트 스트랩 알림

Question

나는이 JSFIDDLE 샘플을 클릭 이벤트 버튼에 포함하고 있습니다. 이벤트가 끝난 후 경고가 사라질 코드를 검색 할 수 있습니다. 지금하고 싶은 일은 의 버튼이 영향을받지 않을 것입니다. before and after 클릭 이벤트. 내가 영향에 말은 클릭하기 전에

1. 입니다 - 버튼을 경고 페이드 후 위로 이동 안 - 버튼보기를 클릭 한 후
2. 에게로 경고를위한 공간이 있어야합니다.

여러분이 이해하기를 바랍니다.

새내기 부트 스트랩입니다.

CODE

CSHTML

< div class="alert alert-success" id="success-alert" style="width:auto"> 
<strong>Success! </strong > 
</div> 

< div class="modal-footer" > 
<button type="button" class="btn btn-primary" id="btnAlert"> 
     Alert</button > 
</div> 

JS

$("#success-alert").hide(); 
$("#btnAlert").click(function() { 
    $("#success-alert").fadeTo(5000, 500).slideUp(500, function() { 
     $("#success-alert").slideUp(500); 
    }); 
}); 

Answer 1

이 시도 : 재를 위의 공간이 사라질 때까지는 공간을 소비 할 요소가 없으므로 버튼이 위쪽으로 이동합니다. 이제 버튼의 위쪽에있는 html의 불투명도를 0으로 설정합니다. JSFIDDLE

$("#success-alert").css("opacity","0"); 
    $("#btnAlert").click(function() { 
      $("#success-alert").css("opacity","1"); 
     $("#success-alert").fadeTo(5000, 500,function(){ 
     $("#success-alert").css("opacity","0"); 
     });  
    });