代码之家  ›  专栏  ›  技术社区  ›  IRHM

jQuery页面重新加载时淡出

  •  2
  • IRHM  · 技术社区  · 12 年前

    我想知道是否有人能帮助我。

    下面的脚本摘录使用户可以从链接到mySQL数据库的表中删除记录。

    <script type="text/javascript">
        $(document).ready(function(){
            $('form.delete').submit(function(e){ 
    
                e.preventDefault();
                var elem = $(this).closest('.delete');
                var lid = $(this).serialize();
                $.confirm({
                     'title'    : 'Delete Confirmation',
                'message'   : 'If you delete this Location, all associated Find records will also be deleted. <br /><br />They cannot be restored at a later time! Do you wish to continue?',
                    'buttons'   : {
                        'Yes'   : {
                    'class' : 'blue',
                    'action': function(){
                    //elem.slideUp();
                                  $.ajax({ 
                                url: 'deletelocation.php', 
                                type: 'POST', 
                                data: lid, 
                                success: function(response) { 
                                console.log('success', response); 
                                        setTimeout(function() { 
                                        $('body').fadeOut(400, function(){
                                        location.reload();
                                        setTimeout(function(){
                                        $('body').fadeIn(400);
                                         }, 500);
                                         window.scrollTo(x-coord, y-coord);
                                     });
                                }, 2000);
                                }, 
                                error: function() { 
                                console.log('error') 
                                } 
                                }); 
                        }
                    },
                    'No'    : {
                        'class' : 'gray',
                                            'action': function(){}  // Nothing to do in this case. You can as well omit the action property.
    
                    }
                }
            });
    
        });
    
        })
    </script> 
    

    我可以设法让“删除确认”消息生效,并实际删除记录,但在删除时添加“淡出”,然后在页面重新加载时添加“淡入”,我有点困难。

    我读了很多帖子,从中我想出了以下内容,并将其整合到上面:

    setTimeout(function() { 
    $('body').fadeOut(400, function(){
    location.reload();
    setTimeout(function(){
    $('body').fadeIn(400);
    }, 500);
    window.scrollTo(x-coord, y-coord);
    });
    }, 2000);
    

    然而,这不起作用,我不知道为什么。我只是想知道哪里有人能看一看这个,并让我知道我哪里错了。

    非常感谢和问候

    3 回复  |  直到 12 年前
        1
  •  1
  •   Sébastien - Vélhost    12 年前

    location.reload()之后的脚本未执行,因为页面正在重新加载。

    你可以在你的url中添加一个标志(#reload),在页面加载开始时,你可以 $('body').hide().fadeIn()如果您找到了标志。

        2
  •  1
  •   djeglin    12 年前

    不能将javascript操作设置为发生在location.reload()之后。

    location.reload()将重新加载页面,重新加载页面时JS堆栈中剩下的任何内容都将丢失。

    您可能需要将body fadeIn作为一个函数添加到页面本身,如果有特定的url参数的话?因此,与其重新加载页面,不如导航到同一页面,再加上指定的查询字符串,例如?reload=true,或指定一个特定的锚点,例如#myAnchor

        3
  •  1
  •   IRHM    12 年前

    首先非常感谢你的帮助。然而,我已经意识到我的问题在哪里。我在 body 部分。我现在已经把它移到了表单之前的脚本开头,它运行得很好。亲切问候