PHP导航+ jQuery动画 - Page Reload

我有一个简单的PHP导航（使用$ _GET变量）的网站。导航链接PHP导航+ jQuery动画 - Page Reload

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

两个codeblocs上的index.php。

菜单元素的动画与jQuerys .animate（）这样的（代码$（文件之间）。就绪）：

$('.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的向左滑动（请记住：它是正确的），在鼠标移出时它会滑回去。在点击时，它保持在原来的位置并获得一个类来标记它被点击。如果你点击另一个menuelement，被点击的那个之前滑动并且新的滑动滑出。所有这些都通过addClass，removeClass和一些if-else语句完成......非常简单。如果链接的a-Tags没有任何链接目标， G。只有散列符号（）一切正常。

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

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

疗法是任何方式使用PHP导航和jQuerys梦幻.animate（），没有“重装”动画中的每个链接被点击的时间？也许有一些我不知道的PHP或jQuery提示。

谢谢你的帮助！

来源

2011-06-10 Mike

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

来源

2011-06-10 15:24:56 Alo

嗨Alo，感谢您的快速回复。我会尝试。 – Mike 2011-06-10 15:37:38

再次问候。我尝试了你的建议，它的工作原理。我已经用'$（'a'）尝试了一些东西。click（function（）{return false;}）;'我现在的问题是mod_rewrite不起作用（对不起，我没有提到我使用它），因为我用jQuery动态加载内容。 – Mike 2011-06-11 08:20:38

PHP导航+ jQuery动画 - Page Reload

回答

相关问题