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

我有一个使用$\u GET-Variables的简单PHP导航站点

导航链接的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>

这两个代码块都位于index.php上

菜单元素使用jQuerys设置动画。动画如下：代码介于$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语句完成的。。。很简单。如果链接的a标签没有任何链接目标，e。G只有散列符号一切正常

但是一旦链接有了目标e。G当单击菜单元素时，jQuery动画会再次启动，因为index.php有点被重新加载。结果是，单击的菜单元素不会一直滑出

我知道我可以，而且我已经用e加载了一些内容。G加载到一个div中。但是我不想在搜索引擎优化和其他方面这样做

是否有任何方法可以使用PHP导航和jQuerys fantastic.animate，而不必在每次单击链接时重新加载动画？也许有一些我不知道的PHP或jQuery提示

---

谢谢你的帮助

您可以使用停止浏览器跟随链接，并在动画制作完成后使用动画中的功能加载链接到页面。

您好。我试过你的建议，效果很好。我以前已经尝试过使用$'a'。clickfunction{return false；}；我现在的问题是mod_rewrite无法工作抱歉，我没有提到我使用它，因为我使用jQuery动态加载内容。

$('.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');
    }
});