我写了一个类似于函数的切换效果。当用户单击按钮时,我的div会从右下角出现到页面中心,当用户再次单击按钮时,div将从页面中心返回到右下角。有关使用jquery动画功能调整div大小的问题
问题是div出现了我想要的方式,但没有调整我想要的方式。请看我的脚本,并指导我缺少什么。这里是我JS提琴链接http://jsfiddle.net/tridip/6o1wv3yt/
$(document).ready(function() {
var flag = false;
$("#Button1").click(function() {
if ($("#UPSContainer").exists() == false) {
$('form').append('<div id="UPSContainer" class="hidden" style="background:red;display:none;position:absolute;height=0px;width=0px;"></div>');
}
if ($("#UPSContainer").hasClass("hidden")) {
$("#UPSContainer").css({ display: 'block' });
var xleft = ($(window).width() - $("#UPSContainer").width());
var xtop = ($(window).height() - $("#UPSContainer").height());
$("#UPSContainer").css({ left: xleft, top: xtop, opacity: 0 });
$("#UPSContainer").stop(true).animate({
'left': (($(window).width() - $("#UPSContainer").width())/2) + 'px',
'top': (($(window).height() - $("#UPSContainer").height())/2) + 'px',
'height': 350 + 'px',
'width': 500 + 'px',
'marginLeft': '-250px',
'marginTop': '-175px',
'opacity': '1'
}, { duration: 1000, queue: false, easing: 'easeOutQuart',
step: function (now, tween) {
if (tween.prop === 'width') {
if (now >= 50) {
//console.log('Width reached 50%');
if (!flag) {
flag = true;
$("body").append('Width reached 50%' + now);
}
}
}
},
complete: function() {
$("#UPSContainer").removeClass("hidden").addClass("Shown");
}
});
}
else if ($("#UPSContainer").hasClass("Shown")) {
var xleft = $(window).width();
var xtop = $(window).height();
$("#UPSContainer").stop(true).animate({
'left': $(window).width() + 'px',
'top': $(window).height() + 'px',
'height': 0 + 'px',
'width': 0 + 'px',
'opacity': '0'
}, { duration: 1000, queue: false, easing: 'easeOutQuart',
step: function (now, tween) {
if (tween.prop === 'width') {
if (now >= 50) {
//console.log('Width reached 50%');
if (!flag) {
flag = true;
$("body").append('Width reached 50%' + now);
}
}
}
},
complete: function() {
$("#UPSContainer").removeClass("Shown").addClass("hidden");
}
});
}
return false;
});
jQuery.fn.exists = function() { return this.length > 0; }
});
工作在这里很好。你如何期望它完全调整大小? – Behrang 2014-11-25 14:46:36
我希望它出现的方式与它应该消失的方式一样。当你点击第二次按钮时,你会注意到div没有进入右下角。我想div应该去右下角。 – Thomas 2014-11-25 14:56:35
当div离开眼睛时,我想要这种效果。只是检查此链接jsfiddle.net/p4e4psg4/5/ – Thomas 2014-11-25 15:19:52