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

У меня есть эта функция только для анимирования 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.