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 />应该会像不透明度一样消失。

请转到此网址并查看div的显示方式。我想要显示和隐藏我的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

首先下载Kendo UI并将其包含在您的项目中。

然后在要使用此效果的页面中，链接Kendo和jquery.min.js的脚本。

将以下代码用于div

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

添加此脚本标记

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

就是这样。不需要做任何其他事情： - ）

Answer 2

考虑fadeIn和fadeOut方法

或.animate({opacity: 0})和.animate({opacity: 1})

更新：刚刚进行了现场演示：http://jsfiddle.net/qiao/L9bRR

Answer 3

好像你实际上在使用jQuery UI。如果是这样，那么您可以使用动画模块中捆绑的任何效果（如“淡入淡出”）。另一方面，您可以尝试以下代码：

// 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
});

注意，在淡入之前，您的<div />的身高＆amp; width应为0，参见效果。

Answer 4

这样做：http://jsfiddle.net/Sj4eG/3/

您需要使用position:absolute定位动画div。当点击触发动画的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 grower = $（'。grower'）;

$('.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);
});

如何显示具有某种特定效果的DIV（成长，缩小）

4 个答案: