Что не так с этой одушевленной функцией?

Question

У меня есть эта функция, чтобы анимировать 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 = $('<div class="page"></div>');
            $(block_page).appendTo('body');
        }

         function add_popup_box(){
             var pop_up = $('<div class="Lighty"><a href="#" class="close"></a><div class="mainbody"><h2>' + options.title + '</h2><p>' + options.description + '</p></div><div class="footer"><button class="closebutton">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);

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

<script type="text/javascript">
        $(document).ready(function () {
            $('.Modalbox').Lighty({
                title: 'Simple Dialog',
                description: 'This is a simple modal dialog with title.<br>Write your descrition here.<br>Write Some content here.<br>Write more content here.<br>Write much more content here.'
            });
        });
    </script>

Живой сэмпл на jsFiddle

Answer 1

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

$('.close,.closebutton').click(function(){
  // This hides `.footer` which is parent of `.closebutton`
  // Commented this out since it's 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...

Answer 2

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

$('.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, вы также можете использовать его вместо этого.Я бы также предложил поместить функцию скрытия в функцию обратного вызова animate вместо setTimeout (чтобы она выполнялась по окончании анимации):

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

Answer 3

Это решение:

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

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