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

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

两个代码块都在 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');
    }
});

发生的情况是悬停的菜单元素向左滑动（记住：它是向右浮动的），在鼠标移出时它会向后滑动。单击时，它会停留在原处并获得一个类来标记它已被单击。如果您单击另一个菜单元素，则之前单击的元素会滑回，而新的元素会滑出。所有这些都是通过 addClass、removeClass 和一些 if-else-statements 完成的……非常简单。如果链接的 a-Tag 没有任何链接目标，例如。 G。只有井号 () 一切正常。

但是一旦链接有一个目标（例如 ），当一个菜单元素被点击时，jQuery 动画就会重新开始，因为 index.php 是一种重新加载。结果是被点击的菜单元素不会一直滑出。

我知道我可以（而且我已经做到了）使用 e 加载一些内容。 G。 .load() 到一个 div 中。但我不想在 SEO 和其他一些方面这样做。

有什么方法可以使用 PHP 导航和 jQuerys 奇妙的 .animate()，而无需在每次单击链接时“重新加载”动画？也许有一些我不知道的 PHP 或 jQuery 提示。

感谢您的帮助！

Answer 1

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