如何在单击按钮时为div设置动画以使其滑出 [英] How can I animate my div to slide out on button click
问题描述
我遇到问题了,我设法获取了一些代码来使div元素向上滑动,但是如果单击了关闭按钮,如何使它再次向下滑动?这样我就可以继续按下该链接,它会再次播放动画,而不是仅仅显示div已经处于其最终位置.
Im having a problem, I have managed to get some code to make a div element slide up into view but how would I get it to slide down again if the close button has been clicked? so that I can keep pressing the link and it will play the animation again rather then just showing the div already in its final position.
这是jquery代码
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(600);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//Slide up Boxes Div transition effect
$(id).css({display:'block'}).animate({marginTop:'0px', opacity:'1', },400);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask, .window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
谢谢
推荐答案
您可以执行与将元素向上滑动相反的操作:
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)
.- You call
.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');
});
});
这篇关于如何在单击按钮时为div设置动画以使其滑出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!