Develop Reference

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.

Horizontal scrolling of page not working within div jquery

I am using this plugin here for horizontal scrolling.
http://manos.malihu.gr/horizontal-page-animation-to-id-with-jquery/
Here is the demo link I have created using it. http://aijaz.co/hearing1/
The problem I am facing is, I can scroll the pages when the link to scroll is just below .content. When I put the link in several divs, the page doesn't scroll. Example:
<div>
<div>
<hr />
← Back to start Next section →
</div>
</div>
This is the script it is using.
<script>
(function($) {
$(window).load(function() {
/* Page Scroll to id fn call */
$("#navigation-menu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({
layout: "horizontal",
highlightSelector: "#navigation-menu a"
});
/* demo functions */
$("a[rel='next']").click(function(e) {
e.preventDefault();
var to = $(this).parent().parent("section").next().attr("id");
$.mPageScroll2id("scrollTo", to);
});
});
})(jQuery);
</script>
Please help me out. Thank you.

Try traversing up through the clicked element's ancestors instead of using .parent() multiple times:
$("a[rel='next']").click(function(e){
e.preventDefault();
var to=$(this).closest("section").next().attr("id");
$.mPageScroll2id("scrollTo",to);
});

You are doing wrong i guess, Use same class for every tag and try sure it will work , go through plugin document .

Jquery collapsing menu in wordpress (slight glitch)

So I'm making a website using wordpress: http://www.baxtersresume.com/wordpress-3.9.1/wordpress/about/
I'm playing with the menu jquery to get the right effect and I think I've almost got it but I need a bit of help. If you look at the site you'll notice when you open the bottom submenu by mousing over and then re-enter the menu from the bottom with the pointer it will close. That's what I'm trying to avoid. Here's the script so far:
jQuery(document).ready(function(){
jQuery(".page_item ul, .sub-menu").hide();
var current;
var currentsub;
jQuery(".page_item ul, .sub-menu").prev().mouseenter( function() {
current = jQuery(this);
currentsub = jQuery(this).next();
currentsub.slideDown();
});
/*jQuery(".header__content").mouseleave( function() {
jQuery(".page_item ul, .sub-menu").slideUp();
});*/
jQuery(".menu-item-object-page, .menu-item-has-children").mouseenter( function() {
if (current != jQuery(this) && currentsub != jQuery(this)) {
currentsub.slideUp();
};
});
});
What can I do here?
edit* (Solved! JSfiddle with the html)
http://jsfiddle.net/tu965j0d/1/

Perhaps something like the following would be a starting point for you. Simply using selectors to determine those elements you want to slideUp/slideDown, and exclude children of the target of the mouseEnter event?
$(function () {
$('.sub-menu').hide().parent().mouseenter(function(){
$('.sub-menu').not($(this).find('.sub-menu')).stop(true, true).slideUp();
$(this).find('.sub-menu').slideDown();
});
});
Fiddle: http://jsfiddle.net/tu965j0d/
Edit: There's also a number of accordian menu libraries and tutorials out there, might be useful? For example, this little tutorial using some nice CSS3 transitions.

JAVASCRIPT - script conflicts?

I have a Carousel made from bootstrap and this is the script to run it.
<script>
!function ($)
{
$(function()
{
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
I tried adding a different effect on the navigation bars I got so that when I click the navigation, it will slide up into the section in that page. I added this script.
<script>
$('a').click(function()
{
$('html, body').animate(
{
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
</script>
when I added the script, the left and right buttons in the carousel stopped working. I really don't know if it had a conflict with the second script. I spent around half an hour looking for the error and finally found out that the second script conflicted with the carousel script.
Is there an error in the scripts? How do I fix it?

My guess is that
$('a').click(function() { /* ... */ })
conflicts with the click event handler set up by carousel(). You could add a class on your navigation links (or use whatever nav class is already there), and use a more specific selector in this second script.

Oh.
Figured it out just now.
Added li in $('a').click(function()
Now it looks like $('li a').click(function()
It doesn't conflict now :))

Jquery accordion not collapsing

So im busy creating a Newsletter archive by using a Jquery accordion for my client. Each month in essence is an accordion (So the month itself is expandable and collapsible) and every article too. My first month (January) is working perfectly but for some reason, none of the others work as expected. The other "months" can expand and collapse but not their articles. I have tried amending the Javascript countless times but to no avail.
Here is the link to the test site:
http://promisedev.co.za/eam/gt/
If anybody has any suggestions or advice it would be greatly appreciated!

i think the problem is with your jquery.akordeon.js file. you can delete this file and use this JQuery code. I edited your code you can use this:
jsFiddle is here
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
$(".togglebox:first").show();
$(".akordeon-item-head").next(".akordeon-item-body").hide();
//slide up and down when click over heading 2
$("h1").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
/* here is the new Codes*/
$(".akordeon-item-head").click(function(){
$(this).next(".akordeon-item-body").slideToggle();
});
});

All you have to do is remove inline styles such as height: 154px and height: 0 and set height in a local/external css:
<style>
.akordeon-item-body { height: 154px; }
</style>

I had to use an accordeon mechanism on some site and finally ended up coding it on my own
Fiddle test case <HERE>
The important part is to store last slided element
$("#commonAncestor").on('click', function (e) {
var $me = $(this),
$clicked = $(e.target).closest('.clickableArea', this),
$lastClicked = $me.data('active') || $([]),
...
});