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

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/

Related

Page FadeIn and FadeOut Transition

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.

call back for javascript animation

I have a java script animation for scrolling unto to the top of a page smoothly.At the end of animation I have a .focus() function to focus on a form field. The focus is causing some jerkiness. Upon researching I found out I can fix by having a call back for animation and having the focus in that. I am not sure how to do that. Any help is much appreciated.
$(".scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1000,'swing');
$('input#Name_First').focus();
});
http://jsfiddle.net/1kbph7q3/
Both the comments on your question are correct.
Heres a working JS Fiddle: http://jsfiddle.net/got29e9v/1/
The first error was that the anchor link need the class of .scroll.
Also the JS fiddle wasn't using JQuery, your JavaScript was trying to use it.
I've added a callback function on the animate method. This is called when the animation completes.
Hope that helps.

loading waiting animation on just a specific div(freez just specific part)

lets say I have a page with 3 div and each of them are loaded with differen ajax call.
so for example div1 may take 30 sec to be loaded and div2, 4 sec so I need different waiting animation for them to show they are loading.
I found these links helpful: link1
link2
but the prblem is that on any click on button the whole page freezes
I want for example on any click on button special section for example a div freezes and shows the animation
Is that possible? can anyone help?
Update:
Here is jfiddle link:
$(document).ready(function(){
$(document).ajaxStart(function(){
$("#wait").css("display","block");
});
$(document).ajaxComplete(function(){
$("#wait").css("display","none");
});
$("button").click(function(){
$("#txt").load("demo_ajax_load.asp");
});
});
jfiddle
You need to target your elements relatively, using classes rather than IDs (which must be unique). Here's a simplified demo:
http://jsfiddle.net/isherwood/N5V4q/
$(document).ready(function () {
$("button").click(function () {
$(this).next(".wait").show();
});
});
If I knew a little more about your ajax calls I might help further.

Hover fast slideshow error

I have a slideshow and I have links to the images on the slideshow.
When the mouse enters the links, the slideshow pauses and plays when the mouse leaves.
My problem is that the slideshow appears to get faster and faster when you quickly move the mouse across the links.
function begin_slideshow() {
some code
}
and the mouse enter/leave function
element.on('mouseenter', function () {
var url = $(this).data('loc').replace('_t', '');//grabs the image
fig.attr("src", url);//changes the source
$('.shown').removeClass('shown');//the link that can be seen has a class of shown
$(this).addClass('shown');//adds class of shown to the now showing link
clearTimeout(timer);
}).on('mouseleave', function () {
timer = setTimeout(begin_slideshow, 5000);
});
I think the problem lies in the hover somewhere, hopefully you can help :) as I am truly stuck.
EDIT
http://jsfiddle.net/uYMkr/8/
I would assume your problem would lie in the timeout. However it seems correct. Therefor I would think the problem exists in either your usage of the slideshowcode, or in the slideshowcode itself. Can you post that?

How to make scrolling to target smooth

I have set up an comment button that is link to comment section of the page, it's like this
Comments
Demo on this page http://stramaxon.blogspot.com/2012/04/how-to-remove-shadows-from-pictures-in.html#disqus_thread
When you click it, you will be taken to the comments section, now i want the scrolling to be smooth, i know it is possible but can't find the key to achieve it. I am sure intelligent web designers in Stackoverflow will help me out.
I want it to be like this, check this page http://www.labnol.org/internet/bing-background-for-google-homepage/21303/
Scroll down and you will see a back to top button, it's so smooth i love it and want something like that.
$("#topBtn").click(scrollToTop);
function scrollToTop()
{
$('html, body').animate({scrollTop:0}, 1000);
}
should work
EDIT: that's for a non href, when you wanna use it on a href you should to it like this
function scrollToTop()
{
$('html, body').animate({scrollTop:0}, 1000);
return false;
}

Categories

Resources