몇 가지 특정 효과 (확대, 축소)로 DIV를 표시하는 방법

Question

몇 달 전 jquery animate 기능을 사용하여 div를 표시 할 수있었습니다.

.ui-dialog 
{ 
width: 200px; 
height: 50px; 
background: red; 

position: fixed; 
left: 50%; 
top: -100px; 
margin-left: -100px; 
} 

var dialogue = $('.ui-dialog') 

dialogue.animate({ 
left: "50%", 
top: "50%", 
marginLeft: -dialogue.width()/2, 
marginTop: -dialogue.height()/2 
}, 1000); 

<div class="ui-dialog">hi there</div> 

위의 코드는 작동했지만 지금은 다른 질문이 있습니다 : 그것은이 같았다. 나는 약간 다른 효력을 가진 페이지의 센터에 <div />를 보여주고 싶다. 사용자가 버튼을 클릭하면 불투명도가 커지면서 <div />이 나타나고 사용자가 '닫기'버튼을 클릭하면 <div />은 불투명도가 줄어드는 것처럼 사라집니다.

이 URL로 이동하여 div가 어떻게 표시되는지 확인하십시오. 그 정확한 효과를 보여주고 내 사업부를 숨기려면 :

http://demos.kendoui.com/web/window/index.html

코드와 개념 제발 도와주세요. 여기

---

내가

var grower = $('.grower'); 

$('.click').click(function(){ 
grower.css({width:0, height:0, left:0, top:0}); 
var windowWidth = $(window).width(); 
var windowHeight = $(window).height(); 
var left = windowWidth/2 - 150; 
var top = windowHeight/2 - 150; 
grower.css({left:windowWidth/2, top:windowHeight/2}); 
grower.animate({width:300, height:300, left:left, top:top},500); 
}); 

Answer 1

이 fadeIn 및 fadeOut 방법

또는 .animate({opacity: 0}) 및 .animate({opacity: 1})

UPDATE을 고려 변경 : 그냥 라이브 데모를했다 : http://jsfiddle.net/qiao/L9bRR

Answer 2

실제로 jQuery UI를 사용하고있는 것처럼 보입니다. 그렇다면 애니메이션 모듈에 번들 된 효과 (예 : "페이드")를 사용할 수 있습니다. 가 효과를 볼에 페이드하기 전에, 당신의 <div />의 높이 & 폭은 모두 0이어야

// To fade in growing... 
$('#div').animate({ 
    opacity : 1, 
    height : 300, // You desired height. 
    width : 400 
}); 

// To fade out shrinking... 
$('#div').animate({ 
    opacity : 1, 
    height : 0, 
    width : 0 
}); 

주 : 다른 한편에서는 다음과 같은 코드를 시도 할 수 있습니다.

Answer 3

이 그것을 할 것입니다 : http://jsfiddle.net/Sj4eG/3/

당신은 position:absolute와 애니메이션 사업부를 배치해야합니다. 애니메이션을 트리거하는 div를 클릭하면 창의 높이 및 너비를 파악하여 증가하는 div의 초기 시작 위치와 애니메이션을 적용해야하는 위치를 파악합니다.

HTML

<div class="click">Click here</div> 
<div class="grower"></div> 

CSS

.click {background:#ccc; border:1px solid black; padding:10px; display:inline-block} 
.grower {width:0; height:0; background:red; position:absolute; top:150px; left:150px} 

JS

VAR 재배자 = $ ('재배.');

$('.click').click(function(){ 
    var windowWidth = $(window).width(); 
    var windowHeight = $(window).height(); 
    var left = windowWidth/2 - 150; 
    var top = windowHeight/2 - 150; 
    grower.css({left:windowWidth/2, top:windowHeight/2}); 
    grower.animate({width:300, height:300, left:left, top:top},500); 
}); 

Answer 4

우선 Kendo UI을 다운로드하여 프로젝트에 포함 시키십시오.

그런 다음이 효과를 사용할 페이지에서 Kendo 및 jquery.min.js 용 스크립트를 연결하십시오.

이 스크립트 태그가

<script> 
    $("#window").kendoWindow({ 
     draggable: false, 
     resizable: false, 
     width: "500px", 
     height: "300px", 
     title: "Modal Window", 
     modal: true, 
     actions: ["Refresh", "Maximize", "Close"] 
    }); 
</script> 

을 추가

<p id="window"> 
    YourContent 
</p> 

이 가지고있는 사업부에 대한 다음 코드를 사용하여 그리고 바로 그거야. 아무것도 할 필요가 없습니다 :-)