We Keep Coding

Fade in fade out related div animation

So I have this code
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn().siblings('.popup').hide();
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
But I'm not quite sure how to animate it. What I want to do is when you click a link, the div fades in (it works), but when you click the related links, I don't want the box to fade out and in again (except for the texts inside it though).
Here's the fiddle
Thanks! x

Hope this works for you
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).fadeIn(function(){
$(this).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the updated fiddle

To get this to fade properly both ways I think you need to play with the z-index:
$(function () {
$(".one, .two, .three").click(function (event) {
event.preventDefault();
$("#" + $(this).attr("class")).css('z-index', 1).fadeIn(function(){
$(this).css('z-index', 0).siblings('.popup').hide();
});
return false;
});
$(".close").click(function (event) {
event.preventDefault();
$(".popup").fadeOut();
});
});
Here is the fiddle

Jquery if div toggled is already visible

i have a div that i want to toggle on click.If div is already visible i dont want my toggle function be executed. Here is my code and for some reasont it's not working propper.
JsFiddle here
<script>
$( document ).ready(function() {
if ($("#toggled").is(":hidden"))
{
$(".test" ).click(function() {
$("#toggled").toggle();
});
}
else
{
}
});
</script>

A lot of work but finally
$( document ).ready(function() {
var indexs = null;
var bindIt = false;
$("ul .test" ).click(function() {
$("#toggled").show();
if($(this).index() == indexs && bindIt == true){
$("#toggled").hide();
bindIt = false;
}else if(bindIt == false){
indexs = $(this).index();
bindIt = true;
}
});
});
JSFIDDLE

You're overthinking this one. If you just want to show the div when a list item is clicked, the show function is all you need:
$(document).ready(function () {
$(".test").click(function () {
$("#toggled").show();
});
});
Here's the updated jsFiddle.

Try using jQuery's one method:
$( document ).ready(function() {
$(".test" ).one('click', function() {
$("#toggled").show();
});
});

How can I add an else statement to this Jquery?

$(document).ready(function(){
$("#start_quiz").click(function(){
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function(){
if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
};
});
});
});
I have managed to get this jQuery code to work so that if the correct answer is in my form, it will fade out and display some text. I was wondering how I could design this so if any of the other four radio buttons were pressed, it could instead display other text (currently nothing happens). Thanks in advance for any help.

$(document).ready(function () {
$("#start_quiz").click(function () {
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function () {
if ($("#test").is(":checked")) {
$(".questions").fadeOut(200, function () {
$('#correct_answer').fadeIn('slow');
});
} else {
/* YOU WOULD PUT CODE HERE FOR INCORRECT ANSWER */
}
});
});
});
http://jsfiddle.net/24DeT/

if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
}
else if($("#testotherone").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#otherone_answer').fadeIn('slow');
});
}
else if($("#testothertow").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#othertow_answer').fadeIn('slow');
});
}

jQuery menu does not show/hide

I have a little problem with this jquery code:
If I call the openMenu function, directly, it works, but inside the if it does not.
$(document).ready(function() {
function checkMenu() {
if($(this).find('ul').css('display') == 'none') {
openMenu();
} else {
closeMenu();
}
}
function openMenu() {
$(this).find('ul').css({display: "block"});
}
function closeMenu() {
$(this).find('ul').css({display: "none"});
}
$('ul li:has(ul)').click(checkMenu);
});

You could make it easy on yourself and use toggle()
$('ul li:has(ul)').click(function(){
$(this).find('ul').toggle();
});
http://api.jquery.com/toggle/

why don't you use .toggle() ? such as:
$(this).find('ul').toggle();
Also you can set the toggle speed either using slow, normal, fast:
$(this).find('ul').toggle('fast');

openMenu doesn't know what "this" is referring to. This should work...
$(document).ready(function() {
function checkMenu() {
var me = $(this);
if(me.find('ul').css('display') == 'none') {
openMenu(me);
} else {
closeMenu(me);
}
}
function openMenu(me) {
//this isn't defined..
me.find('ul').css({
display: "block"
});
}
function closeMenu(me) {
me.find('ul').css({
display: "none"
});
}
$('ul li:has(ul)').click(checkMenu);
});
But the others are right. The toggle function would work really well for something like this.

Delay a submenu

I have make a script. That open my submenu in the navigation. When you go mouse out of the submenu. The submenu must be closed with a delay of 300ms. But the delay is not working. How can i fix this? This is my script:
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
$(this).find('.submenu').delay(300).hide();
$(this).removeClass("hover");
});

I haven't tested the following code but it should work ...
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
var submenu = $(this).find('.submenu');
setTimeout(function() {
submenu.hide();
}, 300);
$(this).removeClass("hover");
});

You will need to create a setTimeout() method, also, you need to define an object to be used inside of your function $(this) will be null.
$('.nav-main .container li').hover(function() {
if ($(this).find('.submenu').length > 0) {
$(this).addClass("hover");
$(this).find('.submenu').show();
}
}, function() {
var object = $(this);
setTimeout(function()
{
$(object).find('.submenu').hide();
$(object).removeClass("hover");
}, 300);
});