Question

我有一个简单的PHP导航网站（使用$ _GET-Variables）。

导航链接的HTML代码（它们向右浮动）：

<a href="index.php?main=test1" class="menuelement">Test 1</a>
<a href="index.php?main=test2" class="menuelement">Test 2</a>
<a href="index.php?main=test2" class="menuelement">Test 3</a>

包含页面的简单PHP代码块：

if(!isset($_GET['main'])) {
    $page = "home";
} else {
    $page = $_GET['main'];
}
include($page.".php");

两个codebloc都在index.php上。

菜单元素使用jQuerys .animate（）进行动画处理（代码在$（document）.ready之间）：

$('.menuelement').hover(function () {
    if ($(this).hasClass('clicked') == false) {             
        $(this).stop(true, false).animate({
            'padding-right': '80px'
        }, 900, 'easeOutBounce');
    }
}, 
function () {
    if ($(this).hasClass('clicked') == false) {     
        $(this).stop(true, false).animate({
            'padding-right': '0px'
        }, 900, 'easeOutBounce');
    }
}
).click(function() {
    if ($(this).hasClass('clicked') == true) {
        //Don't do anything.
    } else {
        $('a.clicked').animate({
            'padding-right': '0px'
        }, 900, 'easeOutBounce');
        $('a.clicked').removeClass('clicked');

        $(this).addClass('clicked');
        $(this).stop(true, false).animate({
            'padding-right': '80px'
        }, 900, 'easeOutBounce');
    }
});

发生的事情是悬停的向导向左滑动（记住：它向右漂浮），在鼠标移动时向后滑动。点击后，它会保持原样并获得一个类来标记它被点击。如果你点击另一个menuelement，那么之前点击的那个将会滑回，而新的一个会被滑出。所有这些都是通过addClass，removeClass和一些if-else语句完成的......非常简单。如果链接的a-Tags没有任何链接目标，e。 G。只有哈希符号（）一切正常。

但是只要链接有一个目标（例如），当点击一个menuelement时，jQuery动画会再次启动，因为index.php是一种重新加载的。结果是点击的menuelement不会停止滑出。

我知道我可以（我已经做过）用e加载一些内容。 G。 .load（）成div。但我不想在搜索引擎优化和其他方面做到这一点。

是否有任何方法可以使用PHP导航和jQuerys梦幻般的.animate（），而无需在每次点击链接时“重新加载”动画？也许有一些我不知道的PHP或jQuery提示。

感谢您的帮助！

Answer 1

您可以使用event.preventDefault()停止浏览器关注链接，并在动画中使用complete callback函数在动画完成后加载链接到的页面。

PHP导航+ jQuery动画 - 页面重新加载

1 个答案: