How to exclude JQuery/Javascript fade in & out function on certain links? -
i'm using fade in , out jquery/javascript effect on site have each page fade in , out when link clicked. it's working great when link clicked leads different page, causing problems when link leads different part of page (such top link), when mailto link clicked, , when link suppose open in new page or tab clicked. when these type of links clicked lead blank white page because don't lead new page. here script:
$(document).ready(function() { //fades body $("body").fadein(1500); //applies every link $("a").click(function(event){ event.preventdefault(); linklocation = this.href; $("body").fadeout(1000, redirectpage); }); //redirects page function redirectpage() { window.location = linklocation; } });
because of i'm trying figure out if there way can exclude fade in/out function links (such top link), don't know how it. know rather set links fade in/out can set fade in/out effect specific class way doesn't effect every link. because site rather large, extremely tedious , difficult add class every link. rather i'm wondering if theres way define no-fade class exclude fade in/out function? way apply class these few links having problems , make links behave normally.
it seems simple thing do, because i'm still not fluent in javascript/jquery don't know how it. appreciated!
*edit: here solution incase else has similar issue. david missing piece!
$(document).ready(function() { //fades body $("body").fadein(1500); //applies 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; } });
yup, indeed define class when applied anchor exclude performaing fade out , redirect.
so if had anchor wanted default fade-out behaviour apply leave is.if didn't want behaviour apply class (we'll call *no-fade") anchor.
html
<a href="http://mysite.com/anotherpage">another page</a> <a href="http://mysite.com#backtotop" class="no-fade">back top</a>
jquery
<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>
the thing i've edited code selection of anchors changed from:
$("a")
to
$("a").not(".no-fade")
Comments
Post a Comment