Develop Reference

Fade In & Out Interval Javascript

How can I have this fiddle to change from first content (mario) to next content (smiley face) without being on hover/click? I want it to change automatically after 5 seconds. Also from second content to third content and fourth content.
Here is a sample from JSFIDDLE. I figured that maybe the coding should be change somewhere here:
$('#text1').hover(function () {
hey();
});
Besides that, anyone knows why my fourth content isn't showing?
I am new in this. Please guide me. Many thanks in advance.

Use setTimeout() function
setTimeout(function () {
hey();
},5000);
Fiddle Updated Fiddle
EDIT
As per your need shoe after 35 seconds
$('#text1,#text2, #text3, #text4').hide();
setTimeout(function () {
$('#text1').show();
hey();
},35000);
function hey() {
setTimeout(function () {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
},5000);
}
Updated fiddle. NEW FIDDLE UPDATED AS PER COMMENT

Just add setTimeout(hey, 5000); instead hover handler:
$('#text2, #text3, #text4').hide();
setTimeout(hey, 5000);
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
}

Your hey() is showing upto 3rd text.Add another next() transition.
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow",function(){
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
});
});
}

If you want to change content automatically after 5 second you should use setTimeout function, for example:
setTimeout(function(){ alert("Hello"); }, 5000) this will triger alert box after 5 seconds...

I Think you have to use setInterval()
setInterval(function(){ hey(); }, 3000);
See this Link what is difference between setTimeout and
setInterval

Jquery : After completion of 'fade in' effect, wait for 'click' event

How can I wait for a click event ?
eg. I want that my <div> wait for 3 seconds after it's fade in, and if within 3 seconds the <div> is not clicked then it fade out.
I tried to give time 2 seconds in fadeOut but mouse click is not working it just fadeOut.
my .js file code:
$(document).ready(function () {
$(".arrow").hide()
$(".container").mouseenter(function () {
$(".arrow").fadeIn()
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000)
});
$(".arrow").click(function () {
$(".container").hide()
});

I'm not sure what you're trying to accomplish but your onClick handler isn't working because syntax is wrong.
Try this:
$(".arrow").on('click', function () {
$(".container").hide()
});
Also you seem to be missing the closing braces of the ready-function.
It should be like this:
$(document).ready(function () {
// Your code here
}); // Don't forget this line

Use a boolean to check if arrow has been clicked at the end of your time limit.
Example
$(document).ready(function () {
var clicked = false;
$(".arrow").click(function () {
clicked = true;
});
$(".container").hover(function () { // i put the two mouseenter, mouseleave functions into one hover(mousein, mouseout) function
$(".arrow").fadeIn();
setTimeout(function () {
if (clicked === false) {
$(".arrow").fadeOut(2000);
}
}, 3000);
}, function () {
$(".arrow").fadeOut(2000);
clicked = false; // i don't know if you want this or not. this resets everything on mouseout. if you want the .arrow thing to stay even after the mouse leaves .container, just get rid of this line
}); // .hover
}); // .ready

$(document).ready(function () {
var clicked = 0;
$(".container").mouseenter(function () {
$(".arrow").fadeIn();
setTimeout(function() {
if(clicked == 0) {
$(".arrow").fadeOut(2000);
}
},3000);
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000);
});
$(".container").click(function () {
clicked = 1;
});

Simplifying js for a dropdown

I have a pretty basic code html code for a dropdown, as can be seen here it works, but is there a way to simplify this js code?
$(document).ready(function() {
var n = ".dropdown-menu", no = 'drop';
$('.dropdown').click(function () {
if($(n).hasClass(no)) {
$(n).removeClass(no);
} else {
$(n).addClass(no);
}
}).mouseover(function() {
$(n).addClass(no);
}).mouseout(function() {
if($(n).mouseover()){
$(n).removeClass(no);
}
})
});
please note that I am aware that I can go css only by adding just one line.. so that isn't the question.
#navigation-top #navigation-holder li:hover > ul {
display: block;
}

We can use toggleClass instead of add/remove class.
In the below code we can remove the if check and directly call removeClass
if ($(n).mouseover()) {
$(n).removeClass(no);
}
So the final optimized code like this:
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).mouseover(function () {
$(n).addClass(no);
}).mouseout(function () {
$(n).removeClass(no);
})
Fiddle Demo

$('.dropdown').click(function () {
$(n).toggleClass(no);
}).hover(
function() {
$(n).addClass(no);
}, function() {
$(n).removeClass(no);
}
);
Not tested, but that should do what you're looking for.
Refs:
https://api.jquery.com/toggleClass/
https://api.jquery.com/hover/

Off the top of my head, use toggleClass() to optimize the class switching
As well as the use of hover() to replace mouseover & mouseout events.
Therefore your code will turn out this way:
$('.dropdown').click(function () {
$(n).toggleClass(no);
}).hover(
function () {
$(n).addClass(no);
}
,function () {
$(n).removeClass(no);
}
);
JS Fiddle Link: http://jsfiddle.net/g9zyd/4/

You can use toggleClass method from jQuery library, and some little trick to do your task!
function rp(el){
$(n).toggleClass(no, el.data);
}
var n = ".dropdown-menu",
no = 'drop';
$('.dropdown').click(rp).mouseover(true, rp).mouseout(false, rp);
Try demo

How can I add a transition to the toggle?

I use this to toggle the sidebar:
$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle();
});
});
you can see it work here:
http://jsfiddle.net/Jacob_Sell/Ye7wp/
I think the toggle looks to jumpy at the moment, how can I add a transition to make it look smoother?

$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(300);
});
});
Updated DEMO

http://jsfiddle.net/Praveen16oct90/Ye7wp/4/
**$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(2000);
});
});**

jQuery swap div on hover with delay

I'm trying to create two "buttons" that using the hover event, hide some divs and then display some others in their place. I'm then trying to delay the swapping back to the default div.
All works, fine, unless you go from one button to the other at which point you get many divs displaying at the same time until the delay passes. If we don't use the delay it works perfectly.
The javascript:
jQuery(function ($) {
$('#servers-btn').hover(
function() {
$('#servers, #servers-heading, #servers-arrow').show(0);
$('#default, #default-heading').hide(0);
},
function() {
setTimeout( function() {
$('#servers, #servers-heading, #servers-arrow').hide(0);
$('#default, #default-heading').show(0);
},1000)
}
);
$('#hosting-btn').hover(
function() {
$('#hosting, #hosting-heading, #hosting-arrow').show(0);
$('#default, #default-heading').hide(0);
},
function() {
setTimeout( function() {
$('#hosting, #hosting-heading, #hosting-arrow').hide(0);
$('#default, #default-heading').show(0);
},1000)
}
);
});
I assume i need to make one hover function aware of the other so it can cancel the timeout, i just have no clue how to do it.
EDIT - just tidyed up code to put all divs into one hide/show.
Also, i should have probably mentioned that the #default, #servers and #hosting divs appear in exactly the same location. So need to instantly switch at the same time (which the above does).
EDIT - latest attempt to use clearTimeout here http://jsfiddle.net/KH4tt/1/ - but can't quite make it work right.

You can use the .delay() function in jquery (I'm using Jquery 1.7.1 version) like the below example:
$(selector).delay(1000).hide("slow");

Try something like this
$('#servers-btn').hover(
function() {
$('#servers, #servers-heading, #servers-arrow').show(0);
$('#default, #default-heading').hide(1000, function() {
$('#servers, #servers-heading, #servers-arrow').hide(0);
$('#default, #default-heading').show(0);
});
}
);

Ok here's the final thing using the clearTimeout() function to cancel the setTimeout() that is used on mouseleave (hover handlerOut) that creates the delay:
jQuery(function($) {
var timeoutserver;
function canceltimeout() {
if (timeoutserver) {
window.clearTimeout(timeoutserver);
timeoutserver = null;
}
}
function closeServertime() {
timeoutserver = window.setTimeout(function() {
$('#servers, #servers-heading, #servers-arrow').hide(0);
$('#default, #default-heading').show(0);
}, 1000);
}
function closeHostingtime() {
timeoutserver = window.setTimeout(function() {
$('#hosting, #hosting-heading, #hosting-arrow').hide(0);
$('#default, #default-heading').show(0);
}, 1000);
}
$('#servers-btn').hover(
function() {
canceltimeout();
$('#servers, #servers-heading, #servers-arrow, ').show(0);
$('#default, #default-heading, #hosting, #hosting-heading, #hosting-arrow').hide(0);
}, function() {
closeServertime();
});
$('#hosting-btn').hover(
function() {
canceltimeout();
$('#hosting, #hosting-heading, #hosting-arrow').show(0);
$('#default, #default-heading, #servers, #servers-heading, #servers-arrow').hide(0);
}, function() {
closeHostingtime();
});
});