从使用jQuery中心动画长(Grow from center animation with JQu

2019-06-24 00:53发布

我期待有从按钮的弹出股利。 当点击该按钮时,我想弹出从按钮的中心,并在同一时间向外生长,滑动到屏幕的中心。 我不认为这应该不会太难,但我找不到任何地方的任何片段。 任何帮助将不胜感激。

感谢来自杰米·迪克森的帮助下,我得到这个代码的工作。

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

Answer 1:

您可以使用jQuery UI与show方法传递“规模化”的作为参数。

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

工作实例

为了你的元素滑动邻的页面我创建托尼L的jQuery函数的修改版本在这里找到中心: 使用jQuery中心屏幕上的DIV 。

工作实例

更新

这里的同时放跑了两个动画的工作示例:

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

为了得到这个工作,我包含在一个额外的参数animate功能传递: {duration: durationLength, queue: false}



文章来源: Grow from center animation with JQuery