Page FadeIn and FadeOut Transition - javascript

I am currently trying to create a script that makes fading transition from page to page when clicking a anchorlink. I have already made the script, but it does not seem to work.
My code look like this:
$("body").load(function() {
$(this).fadeIn(200);
});
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
window.location.replace($link);
});
It does not seem to make the fadeIn and fadeOut transitions. It is still the normal pageload.

First hide the body of the page on page load then
you need to place the redirecting line in the complete function of fadeOut
Try this code:
$(document).ready(function() {
$('body').hide().fadeIn(200);
$("a").click(function(e) {
e.preventDefault();
$link = $(this).attr("href");
$("body").fadeOut(200,function(){
window.location = $link;
});
});
});

You need to hide the element initially, either with .hide() or with CSS display:none;.
$(document).ready(function() {
$('body').hide().fadeIn(200);
});

You have to use setTimeout to time the window.location.replace() to execute after the current body has faded like :
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
setTimeout(function(){
window.location.replace($link);
},200);
return false;
});
Remember to return false at then end of the function else the default action of the link click i.e. redirection precedes any other action associated with the anchor.
But, sincerely, this will give you a smooth fading effect from the current page but not a smooth effect on the redirected page unless it's implemented by you.

This is four years later, but just in case someone needs it. I agree with Roko about the flickering, so I initially hid the body with CSS instead of putting .hide() before the fade in effect:
body {
display: none;
}
Also some have mentioned using .fadeOut(), but it doesn't work on Chrome. I switched to .show() and .hide() which seems to work great. It also animates all of the elements as it fades, which produces a need transition without a hefty jQuery plugin.
$(document).ready(function() {
$('body').show(500);
$("a").click(function() {
$link = $(this).attr("href");
setTimeout(function(){
window.location.replace($link);
},1000);
$("body").hide(500);
return false;
});
});
Lastly, I'm using this on a page that contains click-to-scroll navigation like most one-pagers, as well as opening new tabs with target="_blank", so I changed $("a") to $(".transition-link") and added class="transition-link" to the links I want to navigate from.

Related

Page transition delay after link is clicked (after animation end)

I searched for similar problems but none of the solutions didn't help me.
So, here is my problem, i have in my header a few link for other pages (about, porftiolio etc...) and i have one animation in javascript when <a> element is clicked. But my page transition is instantly so that animation can't be seen. So what should i do to maybe stop page transition for a few second till my animation's end. Here is an example: http://codepen.io/anon/pen/zrXrXM . Can somebody help me what should i do to stop transition until my animation ends.
preventDefault to stop the re-direct, then change the window.location on the animation complete.
$("a").click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$(".header").slideUp("slow", function(){
window.location = href;
});
});
Updated CodePen
You can use the setTimeout() function
look here: http://codepen.io/SitePoint/pen/Ejxvjr
Explain here:http://www.sitepoint.com/jquery-settimeout-function-examples/

AJAX Transition Effect

I'm trying to get this transition effect working with AJAX but the effect doesn't work with it. I essentially have a wrapper class and an innerwrap class in each of my html pages. When you click one of the navbar items, the innerwrap in the current page fades out and the innerwrap in the clicked navbar link fades in. Here is my script:
$(document).ready(function () {
$('#navbar a').click(function () {
var url = $(this).attr('href');
$('.wrapper').fadeOut('.innewrap').load.fadeIn(url + ' .innerwrap');
return false;
});
});
The way I'm seeing it is that the current innerwrap fades out and the innerwrap of the clicked url fades in. I've been struggling with finding a solution through different questions here but I can't seem to find one that's similar to the way I have the code presented. If you can't help but can guide me towards a question where the code is kind of similar that would be awesome. Thank you!
Maybe I'm wrong, but what you do in your code is fading in something like http://example.com/ .innerwrap and that's because you are using url variable where you put value of href attribute from a element.
Try using .load(url, function(){}) to achieve what you want. HERE you'll find more about load() from jQuery ;) Also your fadeIn() and fadeOut() syntax seem to be a little strange.
I think this is more what you want:
$(document).ready(function () {
$('#navbar a').click(function () {
var aObj = $(this);
var url = $(this).attr('href');
$('.wrapper').load(url, function(){
$(this).find('.innerwrap').fadeOut();
$(a).find('.innerwrap').fadeIn();
});
return false;
});
});
I haven't tested this code.

jQuery - use javascript after loading content with Ajax

I'd like to load the flexslider gallery with jQuery when an anchor element is been clicked.
The gallery shall be loaded in div#slider-loader
The problem is that the HTML is loaded properly, but the Javascript seems not to affect the injected elements even though I read that in this cases I shall use .on().
$(document).on('click', '.cliccami' , function() {
var href = $(this).attr('href');
$('#slider-loader').load(href);
return false;
});
Thank you in advance!
--
use a call back function to preform action whaen the load is completed like so
Sweet! it worked! although with such solution the .on() event become useless.
Now I came up with this and it works:
$('.cliccami').click(function() {
var href = $(this).attr('href');
var gallery_height = $('.flexslider').css('height');
$('#slider-loader').hide().fadeIn('slow', 'swing').load(href , function(){
$('.flexslider').flexslider({
animation: "slide"
});
})
return false;
});
The only problem is the injection of the code is very scattering.
I would like to make the div container '#slider-loader' adjust its height according to the '.flexslider' height with a smooth animation.
What I've tried to do is:
$(document).ready(function(){
$('#slider-loader').hide();
});
$(document).on( 'click', '.cliccami', function() {
var href = $(this).attr('href');
var gallery_height = $('.flex-viewport').css('height');
$('#slider-loader').load(href , function(){
$('.flexslider').flexslider({
animation: "slide"
});
$('#slider-loader').css('height' , gallery_height);
$('#slider-loader').slideDown(10000);
});
return false;
});
The problem is that once i click the anchor element the #slider-container start to slideDown showing its content but it dosen't do it for the whole .flexslider height which I've set as variable and gave to him with the .css() method. It slideDown for few pixel and then it suddenly became of the entire .flexslider height.
use a call back function to preform action whaen the load is completed like so
$(document).on('click', '.cliccami' , function() {
var href = $(this).attr('href');
$('#slider-loader').load(href , function(){
// some thing to happen when loading is done
});
return false;
});

Adjusting height of scrolling div

I am combining two scripts together: a scroller and a content fader. When I swap the content (fading), div's with a lot of content make the scrolling div super long. I was reading on the plugin demo for content scrolling (http://manos.malihu.gr/jquery-custom-content-scroller) that you can use $(selector).mCustomScrollbar("update"); when loading different content to make the div adjust accordingly.
I know that code needs to go in my fading script somewhere, but where? Here is the fading script, where would it go?
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function($) {
$.fn.Fader = function() {
this.each(function() {
$('.clickme').bind('click', function(e) {
e.preventDefault();
$( "#mediaswap div" ).fadeOut();
$( "#mediaswap div" + $(this).attr('name') ).fadeIn();
})
});
}
})(jQuery);
$(function() {
$('#mediaswap').Fader();
});
});//]]>
</script>
I've answered your comment on the post but I'm writing it here too.
Since you fade in/out divs, you have to call the update method as a callback to the .fadeIn() function, so it updates the scrollbar after the animation is completed:
$( "#mediaswap div" + $(this).attr('name') ).fadeIn(function(){
$(this).mCustomScrollbar("update");
});
Additionally, there's an extra option parameter you can use when you initially call the plugin, that checks content size and updates the scrollbar automatically if it changes:
$("#mediaswap div").mCustomScrollbar({
advanced:{ updateOnContentResize:true }
});
Using the updateOnContentResize option, depends on the rest of your code (where you call the plugin), so I recommend using the first method.
I recommend checking the div to see if it's animated using something like this:
var wait = setInterval(function() {
if( !$("#mediaswap div").is(":animated"))
{
clearInterval(wait);
//put the code in here because it checks
for whether the DIV is currently animated.
}
}, 200);
You can change the interval if it takes the animation longer to complete the animation.

javascript and ajax load, then effects

I have a javascript code, whereby I'm trying to load a list from a separate page (using jQuery's load() function), slide the current list out and slide the new list in.
Now, I don't want the old list to slide until after the new list has been completely loaded. Can anyone tell me how to achieve this without looking like the script is having second thoughts while execution..
Thank you.
Edit
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').load(page +" .proj").hide().fadeIn();
return false;
});
Sorry for not putting the code in. However, I don't really know how much help this is...
This should do it:
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).slideDown("slow");
});
If you call the slideDown method in load's callback (or any of the other ajax methods), that will ensure the animation happens after the element has been filled with the response.
EDIT: To apply that to your code:
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').slideUp("slow").load(page +" .proj", function() {
$(this).fadeIn("slow"); //or show or slideDown
});
return false;
});
You can also try this:
$("#someDiv")
.slideUp("slow", function(){
$(this).load('blah.html', function() {
$(this).slideDown("slow");
}
);
});
It worked better for me, as you load the page once the slideUp effect is done.

Categories

Resources