WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Page fade in and fade into another page on Fri Apr 13, 2012 1:01 am

XDirect12345

avatar
Registered Member
Registered Member
Im sort of learning JQuery and I want to make a page fade transition, when someone clicks a link it fades to another page.

Code:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(500);

$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeTo('slow', 0.5, newpage, function();
});
function newpage() {
window.location = newLocation;
}
});

I think I got most of the code down but can anyone help me achieve the full effect I want?

http://xdirect12345.forummotion.com

2 Re: Page fade in and fade into another page on Fri Apr 13, 2012 1:22 am

siva

avatar
Registered Member
Registered Member
Try this...!

Code:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(1000);

$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(1000, newpage);
});
function newpage() {
window.location = newLocation;
}
});

http://css-tricks.com/forums/discussion/11073/fade-out-between-pages/p1

http://www.eegarai.net

3 Re: Page fade in and fade into another page on Fri Apr 13, 2012 1:43 am

XDirect12345

avatar
Registered Member
Registered Member
I did, kinda not the effect I was looking for I want it so that when you click a link it fades out then fades in to the page that the link was clicked.

Something like this I think:
Code:
$('.link').click(function(){
$('body').fadeTo("slow", 0.3);
$('body').hover(function(){
$('body').fadeTo("slow", 1.0);
},function(){
$('body').fadeTo("slow", 0.3);
});
});

I dont even know if I got it right Crazy?. If you can suggest something similar to what I mean then please do so.

Here is a link:
http://www.hv-designs.co.uk/tutorials/jquery/all.html

Instead of images, visualize it as the page when the link is clicked.

http://xdirect12345.forummotion.com

4 Re: Page fade in and fade into another page on Fri Apr 13, 2012 8:43 am

ankillien

avatar
Administrator
Administrator
I guess you want a modal window kind of thing where the current page becomes dark and another window takes place which holds the focus.

You can achieve this effect with facybox plugin: http://www.fancybox.net/
It allows to use iframe to display another page in the current page.

If you don't like it, just make a search for jquery modal window, there are many available. Very Happy

5 Re: Page fade in and fade into another page on Fri Apr 13, 2012 11:43 pm

XDirect12345

avatar
Registered Member
Registered Member
Cant seem to find any good ones. Any idea on how the code might look like and where to put it?

http://xdirect12345.forummotion.com

6 Re: Page fade in and fade into another page on Fri Apr 13, 2012 11:45 pm

ankillien

avatar
Administrator
Administrator
Lots of codes and examples are given on fancyapps website: http://fancyapps.com/fancybox/#examples

Take a look and you can learn from it Smile

7 Re: Page fade in and fade into another page on Sat Apr 14, 2012 2:02 am

XDirect12345

avatar
Registered Member
Registered Member
Id rather use JQuery and not download any zip files. To me that is too complicated. Smile

http://xdirect12345.forummotion.com

8 Re: Page fade in and fade into another page on Sat Apr 14, 2012 8:25 am

ankillien

avatar
Administrator
Administrator
XDirect12345 wrote:Id rather use JQuery and not download any zip files. To me that is too complicated. Smile

Thats actually easier.

Just upload the .js file somewhere on web. Add it using <script> tags on your forum and use a simple code like...

Code:
$(function(){
  $('.modal').fancybox();
});

If you choose otherwise, you have to write a long code.

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum