Jquery 这个动画功能有什么问题？

我有这个功能只是从页面顶部设置div的动画，当它关闭时也可以

但是当它被打开的时候，它工作的很好，如果我关闭它，它只是以一种奇怪的方式工作？ 奇怪的是，页脚关闭了，然后它关闭了整个身体

我有一个关闭按钮和一个要关闭的链接。 如果我使用的链接，它的工作很好，但当谈到按钮，然后它的行为就像我上面提到的

这是我的插件：

    (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);

（函数（$）{
//定义jQuery插件
$.fn.Lighty=功能（道具）{
//默认参数
变量选项=$.extend({
高度：“250”，
宽度：“500”，
标题：“JQuery模式框演示”，
描述：“如何创建模式框的示例。”，
顶部：“20%”，
左：“35%”，
}，道具）；
返回此项。单击（函数（e）{
添加块页面（）；
添加弹出框（）；
添加_样式（）；
setTimeout（函数（）{
$（'.Lighty'）.animate（{top:'toggle'}，50）；
},300);
});
函数add_styles（）{
$（'.Lighty'）.css({
'位置'：'绝对'，
“left”：options.left，
“top”：options.top，
“显示”：“无”，
“最大高度”：options.height+“px”，
“宽度”：options.width+“px”，
“边框底部”：“1px实心#EEE”，
“盒子阴影”：“0px 2px 7px#292929”，
“-moz盒阴影”：“0px 2px 7px#292929”，
“-webkit盒阴影”：“0px 2px 7px#292929”，
“边界半径”：“10px”，
“-moz边界半径”：“10px”，
“-webkit边界半径”：“10px”，
“背景”：“ffffff”，
‘z指数’：‘50’，
});
$（'.close'）.css({
'位置'：'相对'，
'顶部'：'15px'，
‘左’：‘20px’，
‘float’：‘right’，
“显示”：“块”，
“高度”：“50px”，
“宽度”：“50px”，
'背景'：'url（images/action_delete.png）不重复'，
});
}
函数添加\块\页（）{
var block_page=$（''）；
$（块_页）.appendTo（'body'）；
}
函数添加\弹出\框（）{
var pop_up=$（''+options.title+''+options.description+'
close'）；
$（弹出）.appendTo（'.page'）；
$（'.close、.closebutton'）。单击（函数（）{
$（this.parent（）.animate（{top:'toggle'}，50）；
setTimeout（函数（）{
$（'.page'）.fadeOut（）.remove（）；
},300);      
});
}
归还这个；
};
})（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>

$（文档）.ready（函数（）{
$（'.Modalbox'）.Lighty({
标题：“简单对话框”，
描述：“这是一个带有标题的简单模式对话框。
在这里写下您的描述。
在这里写一些内容。
在这里写更多内容。
在这里写更多内容。”
});
});

---

“关闭”和“关闭”按钮上的“实时样本”没有相同的父项。关闭将设置整个对话框的动画，然后删除该对话框。“关闭”按钮将设置页脚动画，然后删除对话框。这就是它行为古怪的原因

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

因为在javascript中有对div的引用，所以也可以使用它。我还建议将隐藏函数放在animate的回调中，而不是setTimeout（因此它在动画结束时执行）：

---

您的close和closebutton没有相同的父项。关闭将设置整个对话框的动画，然后删除该对话框。“关闭”按钮将设置页脚动画，然后删除对话框。这就是它行为古怪的原因

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

因为在javascript中有对div的引用，所以也可以使用它。我还建议将隐藏函数放在animate的回调中，而不是setTimeout（因此它在动画结束时执行）：

---

出现此问题的原因是，您首先切换页脚，然后隐藏对话框：

$('.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
..
删除的，所以问题是因为您首先
切换页脚，然后隐藏对话框：

$('.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
..
删除的，所以这是解决方案：

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

问题是您有
$（this.parent（）.animate（{top:'toggle'}，50）
这是解决方案：

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

问题是您有
$（this.parent（）.animate（{top:'toggle'}，50）
您能在jsfiddle.net上准备一个演示吗？几乎没有人会尝试这个locally@eclarns-我正处于测试模式，所以我在js中加入了一个单独的css：）@zerkms-我正在处理这个问题。首先，我想不要让太多人说链接会过期。无论如何，我会把它放在这里。@JuckyScript感谢您的编辑。您能在JSFIDLE.net上准备一个演示吗？几乎没有人会尝试这个locally@eclarns-我处于测试模式，因此，我在js中加入了一个单独的css：）@zerkms-我正在处理这个问题。首先，我认为不要让太多人说链接会过期。无论如何，我会把它放在这里。@JuicyScript感谢您的编辑。@mgibsonbr您说的是我同意，我刚刚尝试过您的代码，但我仍然有相同的问题。对不起，我误解了。我完全同意您的意见。@mgibsonbr您说的是我同意，我刚刚尝试过您的代码，但仍然存在相同的问题。抱歉，我误解了。我完全同意您的意见。@Scripter仍然存在相同的问题我通过注释掉不必要的切换来更新代码operation@Scripter-我还是有同样的问题