Question

我想让我的网站做一些页面转换，但我遇到了一些麻烦（也许这不是一个大问题，但我仍然无法解决）

好的，这是我的计划：

我的计划是，当页面加载时，可以slideDown，所以我执行了以下操作：

$(document).ready(function() {
    var velocity = ($('#main').height() / 500) * 1000;
    $('#main').css('display', 'none');
    $('#main').slideDown(velocity);

速度可确保slideDown的速度可以像素为单位计算。因此，页面持续时间越长。

另一方面，当我提交表单或点击超链接时，页面可以滑动，然后转到应该转到的页面。有些人可能知道问题是实际上没有时间让动画做。在动画开始之前，页面已更改。所以我编写了event.preventtDefault（）来阻止它。是的，它停了下来，事件实际上被删除了所以它没有去任何地方。无论如何这里是代码：

    $('form').submit(function(event) {
        event.preventDefault();
        var velocity = ($('#main').height() / 500) * 1000;
        $('#main').slideUp(velocity);
        $('form').submit();
    });

    $('a').click(function(event) {
        event.preventDefault();  
        if($('a').attr('href') != '') {
            var velocity = ($('#main').height() / 500) * 1000;
            $('#main').slideUp(velocity);
        }
        $(this).click();
    });
});

PS：由于CSS是由purecss.io带来的，所以有些链接没有href去（所有的方法，如果超链接没有href attrubute，则slideUp实际工作），所以如果没有href，请不要使页面滑动。

我知道出了什么问题，但我不知道如何解决它。有什么想法吗？

使用

的HTML代码

<ul>
    <li><b><a>Menu</a></b></li>
    <li><a href="?action=index">Index</a></li>
    <li><a href="?action=announcement">Announcement</a></li>
    <li><a href="?action=sysmsg">System Message</a></li>
</ul>

Answer 1

您可以在slideUp或slideDown功能中使用回调功能。只有在动画完成后才会将其称为。在回调中，您可以使用JavaScript来更改浏览器位置（我认为这是您正在寻找的）。像这样：

$('a').on('click', function( e ) {
   e.preventDefault();

   if ( $(this).attr('href') !== '') {

       $('#main').slideUp( velocity, function() {

           var url = $(this).attr('href');

           window.location = url;

       });

   }

});

Answer 2

在这里回答，感谢所有帮助过我的人，我很感激。詹姆斯可能是对的，我不应该使用页面转换。简单永远是最好的。（实际上在某些情况下效果不正常）

$(document).ready(function() {
    $('#main').css('display', 'none');
    $('#main').slideDown($('#main').height());

    $('a').click(function(event) {
        event.preventDefault();  
        url = $(this).attr('href');
        if(url !== '' && url.length > 0) {
            $('#main').slideUp($('#main').height(), function() {
                 window.location = url;
            });
        }
    });

    $(':submit').click(function(event) {
        event.preventDefault();
        $('#main').slideUp($('#main').height(), function() {
            $('form').trigger('submit');
        });
    });
});

对于拥有简单网站的人，可以随意复制和使用它。（或者我不会在这里发帖）对于那些想要了解这个问题的人来说，好吧......

1。无论我使用target =＆＃34; _blank＆＃34;这些链接都不会在新窗口中打开或不。实际上你可以修复（在StackOverflow中浏览另一个问题，你会发现它）

2。如果您想在提交期间处理表单，您将会陷入困境。我有一些JavaScript来检查表单的输入数据，然后再将其提交到PHP页面。它将在checkForm（）之前使用该效果。我想告诉的是，如果checkForm（）返回false，则没有文档准备就绪。所有这些意味着页面不会再次向下滑动。即你被抢走了！洛尔

jQuery slideUp和slideDown作为页面转换

2 个答案: