使用JQuery从中心动画成长 [英] Grow from center animation with JQuery

问题描述

我希望通过按钮创建一个弹出式div.单击按钮时，我希望弹出窗口从按钮的中心向外增长，同时将其滑动到屏幕的中心.我认为这应该不会太难，但是我找不到任何片段.任何帮助将不胜感激.

I'm looking to have a popup div from a button. When the button is clicked, I want the popup to grow outwards from the center of the button and at the same time, slide to the center of the screen. I don't think this should be too hard but I can't find any snippets anywhere. Any help would be greatly appreciated.

多亏了杰米·迪克森(Jamie Dixon)的帮助，我的代码才能正常工作.

Thanks to the help from Jamie Dixon, I got this code working.

$('#grower').css({
    backgroundColor: '#FFFFFF',
    border: '10px solid #999',
    height: '0px',
    width: '0px',
    color: '#111111',
    fontWeight: 'bold',
    padding: '10px',
    display: 'none',
    position: 'absolute',
    left: $(this).position().left,
    top: $(this).position().top
}).appendTo('#overlay').fadeIn(0).animate({
    position: 'absolute',
    height: '200px',
    width: '600px',
    marginTop: '-120px',
    marginLeft: '-320px',
    display: "",
    top: ((($(parent).height() - $(this).outerHeight()) / 2) + $(parent).scrollTop() + "px"),
    left: ((($(parent).width() - $(this).outerWidth()) / 2) + $(parent).scrollLeft() + "px")
}, 1000);

推荐答案

您可以将jQuery UI与show方法一起使用，并将show参数作为参数传递.

You can use jQuery UI with the show method passing in "scale" as a parameter.

 $('#growwer').show("scale",{}, 1000);

工作示例

为了将元素滑动到页面的中心，我创建了Tony L的jQuery函数的修改版本，位于以下位置:

To slide your element to the center o the page I've created a modified version of Tony L's jQuery function found here: Using jQuery to center a DIV on the screen.

工作示例

更新

这是两个动画同时运行的工作示例:

Here's a working example of the two animations running simultaniously:

http://jsfiddle.net/wNXLY/1/

要使其正常工作，我在传入的animate函数上包括了一个额外的参数:{duration: durationLength, queue: false}

To get this to work I included an extra parameter on the animate function passing in: {duration: durationLength, queue: false}

这篇关于使用JQuery从中心动画成长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！