更新时间:2022-12-26 10:59:33
您可以执行与将元素向上滑动相反的操作:
You can just do the opposite of what you are doing to slide-up the element:
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$(this).closest('.window').animate({
marginTop : 1200,
opacity : 0
}, 400, function () {
$(this).css('display', 'none');
});
});
您的代码中有一些错误:
There are a few errors in your code:
.animate({marginTop:'0px', opacity:'1', },400)
有一个逗号结尾,将在Internet Explorer中强制错误,它应该是:.animate({marginTop:'0px', opacity:'1' },400)
..css
,您只需将对象传递给.css
函数,就像在代码中的进一步介绍一样:.animate({marginTop:'0px', opacity:'1', },400)
has a trailing comma that will force errors in Internet Explorer, it should be: .animate({marginTop:'0px', opacity:'1' },400)
..css
twice in a row on the same element, you can just pass an object to the .css
function like you do further down in your code:.
$(id).css({
top : winH/2-$(id).height()/2,
left : winW/2-$(id).width()/2,
display : 'block'
}).animate({marginTop:'0px', opacity:'1' },400);
注意,我还链接了.animate()
函数调用,这样您只需选择一次$(id)
.
Notice I also chained the .animate()
function call, this way you only select $(id)
once.
您是否知道jQuery已经具有执行此操作的功能?
Are you aware that jQuery already has functions that do this?
.slideUp()
: http://api.jquery.com/slideup .slidedown()
: http://api.jquery.com/slidedown .slideToggle()
: http://api.jquery.com/slidetoggle .slideUp()
: http://api.jquery.com/slideup.slidedown()
: http://api.jquery.com/slidedown.slideToggle()
: http://api.jquery.com/slidetoggle这是您的jsfiddle的更新版本: http://jsfiddle.net/4hw8H/1/
Here is an updated version of your jsfiddle: http://jsfiddle.net/4hw8H/1/
$(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var $this = $($(this).attr('href')),
winH = $(window).height(),
winW = $(window).width(),
maskHeight = $(document).height(),
maskWidth = $(window).width();
$('#mask').css({
width : maskWidth,
height : maskHeight
}).fadeIn(600);
$this.css({
top : winH / 2 - $this.height() / 2,
left : winW / 2 - $this.width() / 2,
display : 'block'
}).animate({
marginTop : 0,
opacity : 1
}, 400);
});
$('.window .close').click(function (e) {
e.preventDefault();
$(this).closest('.window').animate({
marginTop : 1200,
opacity : 0
}, 400, function () {
$(this).css('display', 'none');
});
$('#mask').fadeOut(600);
});
$('#mask').click(function () {
$('.window .close').trigger('click');
});
});