Im using jquery to load in 2 external pages, one called search.php and the other is called info.php. I am displaying them each on a single page called user.php but only when there link has been clicked in the navigation bar. Unfortunately I am currently experiencing a problem, when I use this section of script:
$(document).ready(function() {
$('#content_area').load($('.menu_top:first').attr('href'));
});
$('.menu_top').click(function() {
var href = $(this).attr('href');
$('#content_area').hide().load(href).fadeIn('normal');
return false;
});
My page seems to flicker and stall for 2 seconds before changing the content. I have noticed However if I remove the .hide and fadeIn it seems to work fine. How can I still use the fade-in but eliminate the stall and flickering?
jQuery adds .fadeIn, .hide, and other effects to it's effect's queue. So it's calling .load() instantly JUST AFTER it sends the .hide to the effect's queue/and the .hide isn't completed.
You can do a callback on the .hide method:
$('#content_area').hide(function(){
$('#content_area').load(href).fadeIn('normal');
})
This allows hide to finish first.
try experimenting with .stop to see if it helps with flickering:
$('#content_area').hide().stop(true,true).load(href).stop(true,true).fadeIn('normal');
for flickering use animate instead of fadeIn or fadeOut
for fadeout
$("youeSelector").animate({ opacity: 0 }, 'slow');
for fadein
$("youeSelector").animate({ opacity: 1 }, 'slow');
and as far as the second problem goes make sure you are not including the script files twice
Related
I am trying to auto hide the ajax alert messages in OpenCart version 2.3.0.2 but I can't make it work correctly. I added the code below in my template's header file so I can hide the .alert div after 5 seconds:
setTimeout(function() {
$(".alert").hide("slide", { direction: "right" }, 150);
}, 5000);
It works fine but only for the first alert triggered and I have to reload/refresh the page to make the hide script work again !
What am I doing wrong?
tl;dr You have to iterate on the array returned by $(".alert").
See this CodePen
Also, you should not use setTimeout to trigger the callback after DOM has loaded ; jQuery has $(document).ready() for that.
JavaScript
$(document).ready(function(){
$(".alert").each(function(){
$(this).hide();
})
});
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.
I'm trying to do a simple slide out effect, then add a class with display:none;
But for some reason, the jQuery animation is completing instantly, instead of using the duration as the docs say. I tried using different values, and 'slow' / 'fast'.
Looking at the source in Chrome's developer tools, the DOM is updated instantly. Removing the callback doesn't make the animation work either, it just does nothing in that case.
$('.type-panel').slideDown(500, function () {
$(this).addClass('panel-hidden')
});
<div class="ed-panel type-panel">
//bunch of stuff
</div>
What am I missing?
(I have jQuery and jQueryUI referenced)
I think you meant to use .slideUp() to hide it.
$('.type-panel').slideUp(500, function() {
$(this).addClass('panel-hidden');
});
Notice, .slideUp() will add automatically set the display to none.
I'm using AJAX to load survey content into a container on a page, and during the transition, I fadeOut the container and fadeIn when it's done. It works fine for pages 1-4, but stops working for page 5. The content loads for page 5, but the container doesn't fadeIn.
success: function(data){
$("div#surveyContainer").fadeOut(function(){
$("div#surveyContainer").html(data).hide().fadeIn();
}); // end fadeout
}
There is no reference to surveyContainer anywhere in page 5. All I can think of is that something is timing out causing the fadeIn to not get triggered. The load time is about 36ms. I set the php script to where it's sending data to report all errors (and the data is making it into the Db just fine), but all I'm getting is the content I expect, but the container stays display:none. If I remove the fades, everything works fine :/
I've also tried this to no avail:
success: function(data){
$("div#surveyContainer").fadeOut(function(){
$("div#surveyContainer").html(data);
$("div#surveyContainer").fadeIn();
}); // end fadeout
}
Try adding a .stop(); see reference here
success: function(data){
$("div#surveyContainer").fadeOut(function(){
$(this).html(data).stop(true, true).fadeIn();
}); // end fadeout
}
This should stop any animations that are currently happening, force them to go straight to their ending point (where they were animating to) and clear the animation queue. You can probably get rid of the hide() this way too.
Also, you can just use this inside the callback for, well, I dont' know why. but you can.
Not sure why it would break on a individual page tho.
Perhaps you could try it in the callback of .hide():
$("div#surveyContainer").html(data).hide('slow', function(){
$(this).fadeIn();
});
As Interstellar_Coder pointed out. You have already hidden the div#surveyContainer when you faded it out. You now just need to load up your data and fade it in.
success: function(data){
$("div#surveyContainer").fadeOut(function(){
$(this).html(data).fadeIn(); // Removed the .hide()
}); // end fadeout
}
Don't link to http://code.jquery.com/jquery-latest.js from a page using encryption (HTTPS). Host the code locally.
I'd like to know how this effect (http://www.getflow.com/) is achieved.
I'm guessing that it's using jQuery to sequentially change the opacity of each element.
Could anyone post a quick snippet of js to make this happen (load in each image, one every 3 seconds)
http://jsfiddle.net/5hdcz/2/
Thanks!
Use the fadeIn callback functions:
$('#img1').fadeIn('slow', function() {
$('#img2').fadeIn('slow', function() {
// and so on...
});
});