Что не так с этой функцией анимации?

У меня есть эта функция только для анимирования div от верхней части страницы и vieversa, когда она закрыта.

Но он отлично работает, когда он открывается, если я его закрыл, он ведет себя странно? Нечетный путь в том смысле, что нижний колонтитул закрыт, а затем закрывает все тело.

У меня есть кнопка закрытия и ссылка для закрытия. Если я использую ссылку, она работает нормально, но когда дело доходит до кнопки, она ведет себя так, как я упоминал выше.

Это мой плагин:

(function($){

 // Defining our jQuery plugin

 $.fn.Lighty = function(prop){

 // Default parameters

 var options = $.extend({
 height : "250",
 width : "500",
 title:"JQuery Modal Box Demo",
 description: "Example of how to create a modal box.",
 top: "20%",
 left: "35%",
 },prop);

 return this.click(function(e){
 add_block_page();
 add_popup_box();
 add_styles();
 setTimeout(function() {
 $('.Lighty').animate({top:'toggle'},50);
 },300);
 });

 function add_styles(){
 $('.Lighty').css({
 'position':'absolute',
 'left':options.left,
 'top':options.top,
 'display':'none',
 'max-height': options.height + 'px',
 'width': options.width + 'px',
 'border-bottom':'1px solid #EEE',
 'box-shadow': '0px 2px 7px #292929',
 '-moz-box-shadow': '0px 2px 7px #292929',
 '-webkit-box-shadow': '0px 2px 7px #292929',
 'border-radius':'10px',
 '-moz-border-radius':'10px',
 '-webkit-border-radius':'10px',
 'background': '#ffffff',
 'z-index':'50',
 });
 $('.close').css({
 'position':'relative',
 'top':'15px',
 'left':'20px',
 'float':'right',
 'display':'block',
 'height':'50px',
 'width':'50px',
 'background': 'url(images/action_delete.png) no-repeat',
 });
 }

 function add_block_page(){
 var block_page = $('');
 $(block_page).appendTo('body');
 }

 function add_popup_box(){
 var pop_up = $('<div><div><h2>' + options.title + '</h2><p>' + options.description + '</p></div><div><button>close</button></div></div>');
 $(pop_up).appendTo('.page');

 $('.close,.closebutton').click(function(){
 $(this).parent().animate({top:'toggle'},50);
 setTimeout(function() { 
 $('.page').fadeOut().remove(); 
 },300); 
 });

 }

 return this;
 };
})(jQuery);

Вот как я это называю:

Живой образец на jsFiddle

3 ответа

Ваша близкая и близкая кнопка не имеет одного и того же родителя. Закрытие оживляет весь диалог, а затем удаляет диалог. Закрывающая кнопка оживляет нижний колонтитул, а затем удаляет диалог. Вот почему он ведет себя странно.

$('.close,.closebutton').click(function(){
 $(this).parent().animate({top:'toggle'},50); // This should be parent().parent() for .closebutton
 setTimeout(function() { 
 $('.page').fadeOut().remove(); 
 },300); 
});

Поскольку у вас есть ссылка на div в вашем javascript, вы также можете использовать его. Я также предлагаю включить функцию скрытия в анимированный обратный вызов вместо setTimeout (поэтому он выполняется, когда анимация заканчивается):

pop_up.animate({top:'toggle'},50,function() {
 $('.page').fadeOut().remove(); 
});


Проблема связана с тем, что вы сначала toggle нижний колонтитул, а затем скрываете диалог:

$('.close,.closebutton').click(function(){
 // This hides '.footer' which is parent of '.closebutton'
 // Commented this out since it not needed
 // $(this).parent().animate({top:'toggle'},50);
 setTimeout(function() {
 // This hides the dialog
 $('.page').fadeOut().remove();
 },300); 
});

Вы можете просто пропустить переключение $(this).parent().animate({top:'toggle'},50); поскольку он удален с помощью .page...


Это решение:

$('.close,.closebutton').click(function(){
 $(this).parent().parent().animate({top:'toggle'},50);
 setTimeout(function() { 
 $('.page').fadeOut().remove(); 
 },300); 
 });

Проблема в том, что у вас есть $(this).parent().animate({top:'toggle'},50);

licensed under cc by-sa 3.0 with attribution.