CODEWITHSUNDEEP
c#jqueryasp.net
Ruby
Ruby

Reputation: 969

JQuery - Page fade out and fade in

There is a Master page with a logout button, few web pages, and a login page which does not use this master.

Trying to acheive this - When user clicks on logout, the current page will fade out into the login page. If it morphs into the login page, that would be great.

What's happening is,

  1. The fade out applies only for home page but not for other pages. All of these use the master. The Home page is in the root directory. The others are in different folder. Is it necessary to link the jquery src for all pages.

MASTER PAGE:

<script type="text/javascript">
 $(document).ready(function(){
   $("#lnkLogout").click(function(){
     $("#form1").fadeOut("slow");         
  });
});
</script>

<form id = "form1" runat="server">     
 <asp:LinkButton id="lnkLogout" runat="server" Text="Logout" >
 </asp:LinkButton>
 <div id ="divContent">
   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
   </asp:ContentPlaceHolder>
 </div>
</form>

Upvotes: 1

Views: 490

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

You will always get the 'break' as you are loading a new page.

The only way to achieve your 'super-smmmoootttthhhhhh' effect would be to pre-load the log-in form via ajax and then run your fade-in fade-out technique. (well not the only way but gives you the idea - your 'break' is from a page-load.)

Upvotes: 1

Related Questions