使用JQuery从中心动画成长

前端之家收集整理的这篇文章主要介绍了使用JQuery从中心动画成长前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找一个弹出的div从一个按钮.当点击按钮时,我希望弹出窗口从按钮的中心向外扩展,同时滑动到屏幕的中心.我不认为这应该是太难了,但我找不到任何片段.任何帮助将不胜感激.

感谢Jamie Dixon的帮助,我得到了这个代码.

$('#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以“scale”作为参数传递show方法.
$('#growwer').show("scale",{},1000);

Working example

要将您的元素滑动到中心页面,我创建了一个修改版本的Tony L的jQuery函数,这里找到:Using jQuery to center a DIV on the screen.

Working Example

更新

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

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

为了让这个工作,我在传递的动画函数添加了一个额外的参数:{duration:durationLength,queue:false}

原文链接:https://www.f2er.com/jquery/176165.html

猜你在找的jQuery相关文章