如何排除JQuery/Javascript淡入&;在某些链接上输出函数?
我在我的站点上使用这种淡入淡出JQuery/Javascript效果,在单击链接时使每个页面淡入淡出。当被点击的链接指向不同的页面时,它工作得很好,但是当链接指向页面的不同部分(例如我的返回顶部链接)、当点击mailto链接时,以及当在新页面或选项卡中打开的链接被点击时,它会导致问题。当点击这些类型的链接时,它们只会导致一个空白的白色页面,因为它们不会导致一个新页面。以下是脚本:如何排除JQuery/Javascript淡入&;在某些链接上输出函数?,javascript,jquery,fadein,fadeout,Javascript,Jquery,Fadein,Fadeout,我在我的站点上使用这种淡入淡出JQuery/Javascript效果,在单击链接时使每个页面淡入淡出。当被点击的链接指向不同的页面时,它工作得很好,但是当链接指向页面的不同部分(例如我的返回顶部链接)、当点击mailto链接时,以及当在新页面或选项卡中打开的链接被点击时,它会导致问题。当点击这些类型的链接时,它们只会导致一个空白的白色页面,因为它们不会导致一个新页面。以下是脚本: $(document).ready(function() { //Fades body $("bo
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
正因为如此,我试图找出是否有一种方法可以从某些链接(如返回顶部链接)中排除淡入/淡出功能,但我不知道如何做到这一点。我知道,与其将所有链接设置为淡入/淡出,不如将淡入/淡出效果设置为特定类,这样不会影响每个链接。然而,由于该站点相当大,将该类添加到每个链接将非常繁琐和困难。因此,我不想这样做,而是想知道是否有一种方法可以定义一个无淡入淡出类来排除这个淡入淡出函数?这样,我可以将该类应用于存在问题的这几个链接,并使这些链接正常运行
这似乎是一件简单的事情,但因为我对javascript/jquery还不是很流利,所以我不知道怎么做。任何帮助都将不胜感激
*编辑:这里是解决方案,以防其他人有类似的问题。谢谢大卫丢失的那一块
$(document).ready(function() {
//Fades body
$("body").fadeIn(1500);
//Applies to every link EXCEPT .no-fade class
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
//Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
不引人注目的方法是查找哈希符号(#
)或mailto:
等,以防止这些类型的链接淡出:
另外,linkLocation=this.href
应该是linkLocation=$(this.attr('href')
不引人注目的方法是查找哈希符号(#
)或mailto:
)等,以防止这些类型的链接淡出:
另外,
linkLocation=this.href
应该是linkLocation=$(this.attr('href')
是的,您确实可以定义一个类,当应用于锚点时,它将从淡出和重定向的执行中排除
因此,如果你有一个锚,你希望你的默认淡出行为适用于它,那么就让它保持原样。如果你不希望这种行为,那么你可以对锚应用一个类(我们称之为*无淡出”)
HTML
<a href="http://mysite.com/anotherPage">Another page</a>
<a href="http://mysite.com#backToTop" class="no-fade">Back to top</a>
到
是的,您确实可以定义一个类,当应用于锚点时,该类将排除它执行淡出和重定向 因此,如果你有一个锚,你希望你的默认淡出行为适用于它,那么就让它保持原样。如果你不希望这种行为,那么你可以对锚应用一个类(我们称之为*无淡出”) HTML
<a href="http://mysite.com/anotherPage">Another page</a>
<a href="http://mysite.com#backToTop" class="no-fade">Back to top</a>
到
你好,大卫,谢谢你的帮助。我试着在脚本中插入这个,但我认为我做得不对,因为它不起作用。抱歉,对于javascript/jquery来说还是相当陌生的。我应该在//etc区域放置什么?我应该把这个放在剧本的什么地方?太棒了!无论如何更新答案!令人惊叹的!我也用答案更新了这个问题。就在我回答了你最初的答案后,我意识到你做了什么哈哈。回答得很好,简单,切中要害,完全达到了我的目的。你得到了解决方案;D会投票给你,但我的代表率还不够高:(嗨,David,谢谢你的帮助。我尝试将此插入脚本中,但我认为我做得不对,因为它不起作用。很抱歉,javascript/jquery仍然非常新。我应该在//etc区域中放置什么?我应该将其放置在脚本中的何处?太棒了!无论如何更新了答案!太棒了!我也用解决方案更新了问题。对吗在我回答了你最初的答案后,我意识到你做了什么哈哈。答案很好,简单,切中要害,并且完全实现了我的愿望。你得到了解决方案;D会投票给你,但我的代表率还不够高:(嗨,Alex,谢谢你的帮助。我尝试了你的代码,它可以用于返回顶部按钮,但是我如何将其用于href=“mailto:”links and target=“\u blank”链接?再次感谢Alex提供的帮助,但我必须使用Davids answer。@juroto我刚刚修复了我的代码。我的解决方案就是所谓的解决方案,因为它不需要向每个链接添加不必要的CSS类来实现最终结果。我明白了,这也非常有效,是一个很棒的替代解决方案。虽然它比js代码多一点,但我不会这么做我不得不担心以后会不会给这些类型的链接设置淡入淡出的类,这很好。感谢你更新了解决方案,并花时间写了提琴亚历克斯!我想你的脚本的一个问题是,当它返回到顶部按钮时,它会出现这个奇怪的小故障。我很确定它与另一个相冲突我正在使用的脚本用于设置从上到下转换的动画。下面是代码:
//滚动到顶部$('#top').bind('click',function(){$('html,body').animate({scrollTop:0},$(window.scrollTop()/1.5);返回false;})
你好,Alex,谢谢你的帮助。我尝试了你的代码,它对返回顶部按钮有效,但是我如何将其用于href=“mailto:”links and target=“\u blank”链接?再次感谢Alex提供的帮助,但我必须使用Davids answer。@juroto我刚刚修复了我的代码。我的解决方案就是所谓的解决方案,因为它不需要向每个链接添加不必要的CSS类来实现最终结果。我明白了,这也非常有效,是一个很棒的替代解决方案。虽然它比js代码多一点,但我不会这么做我不得不担心以后不会给这些类型的链接设置淡入淡出的类,这很好。谢谢你更新了解决方案,并花时间写了提琴亚历克斯!不过你的脚本有一个问题,就是当它回到顶部按钮时
<script type="text/javascript>
$(document).ready(function() {
$("body").fadeIn(1500);
$("a").not(".no-fade").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
// Redirects page
function redirectPage() {
window.location = linkLocation;
}
});
</script>
$("a")
$("a").not(".no-fade")