We Keep Coding

jQuery .find() selects correct element but does not display it

I wasn't sure exactly how to phrase this question, so here's the details:
This little thing I've written up here: https://jsfiddle.net/f8thL83r/1/
works great, as long as you only want to show elements in the top menu.
Click on anything under "Graphic Design", and it won't display anything in the pane to the right. Why is it working for the first category and not the second?
Here's some code. I know the way I've done this is probably awful, but I'm just beginning to find my feet with jQuery.
$('#Menu h3').click(function () {
$("#Menu ul ul").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown();
}
});
$('#Menu ul ul li a').click(function (e) {
var $currPage;
e.preventDefault();
$lastPage.hide();
var j = ($(this).parent().index()); //index of the li to show
var i = $(this).parent().parent().parent().index(); //index of the ul to show
$currPage = $('#ServMain .list' + i).find('.page' + j);
$currPage.show();
$lastPage = $currPage;
});

It seems other HTML elements of the selected page are not visible.
Below code should fix them
$('#Menu ul ul li a').click(function (e) {
e.preventDefault();
$lastPage.hide();
var j = ($(this).parent().index());
var i = $(this).parent().parent().parent().index();
$('#ServMain ul').not('.list'+i).hide();
$lastPage = $('#ServMain .list' + i).find('.page' + j);
$lastPage.parent().show();
$lastPage.show();
$lastPage.find('div').show();
});
DEMO

The problem is the ul.list is hidden
$('#Menu ul ul li a').click(function (e) {
var $currPage;
e.preventDefault();
$lastPage.hide();
var j = ($(this).parent().index());
var i = $(this).parent().parent().parent().index();
$('#ServMain > ul').not('.list'+i).hide();
$currPage = $('#ServMain .list' + i).show().find('.page' + j);
$currPage.show();
$lastPage = $currPage;
});
Demo: Fiddle

Jquery sequential display units when the mouse

I made a simple code :
JSFiddle: http://jsfiddle.net/xmocartx/sr194nsb/4/
The problem is that when you hover the mouse fast blocks mixed.
In Jquery I am a newbie. Please tell me how to fix this? Thank you.
$(document).ready(function() {
var flag = 1;
var liLength = $(".slideMenu ul li").length;
var num = 1;
var numHover;
var numTmp=0;
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq(0)").fadeIn(500);
var myInterval = function(){
interval = setInterval(function(){
if(num>=liLength)
num=0;
$(".slideMenu ul li").removeClass("active");
$(".slideMenu ul li:eq("+num+")").addClass("active");
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
num++;
},3000);
}
var stop = function(){
clearInterval(interval)
}
$(".slideMenu ul li").on({
mouseenter: function () {
stop();
if(num>=1)
numTmp=num-1;
else numTmp=num;
numHover=$(".slideMenu ul li").index(this);
num=numHover;
if(numHover!=numTmp){
$(".slideMenu ul li").removeClass("active");
$(this).addClass("active");
$(".slideMenuCont .item").fadeOut(500);
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
}
},
mouseleave: function () {
if(num<liLength)
num++;
myInterval();
}
});
var Auto = function(){
myInterval();
}
Auto();
});

give this a try.
This should fix the display Issue while preserving the 500 sec fade in.
It basically clears the display contents when moving the mouse fast so you dont get the messy transitions.
$(document).ready(function() {
var flag = 1;
var liLength = $(".slideMenu ul li").length;
var num = 1;
var numHover;
var numTmp=0;
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item:eq(0)").fadeIn(500);
var myInterval = function(){
interval = setInterval(function(){
if(num>=liLength)
num=0;
$(".slideMenu ul li").removeClass("active");
$(".slideMenu ul li:eq("+num+")").addClass("active");
$(".slideMenuCont .item").fadeOut(500);
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
num++;
},3000);
}
var stop = function(){
clearInterval(interval);
}
$(".slideMenu ul li").on({
mouseenter: function () {
stop();
$(".slideMenu ul li").removeClass("active");
if(num>=1)
numTmp=num-1;
else numTmp=num;
numHover=$(".slideMenu ul li").index(this);
num=numHover;
if(numHover!=numTmp){
$(".slideMenuCont .item").fadeOut(0);
$(".slideMenuCont .item").stop().fadeOut(500);
$(".slideMenuCont .item").css("display","none");
$(this).addClass("active");
$(".slideMenuCont .item:eq("+num+")").fadeIn(500);
}
},
mouseleave: function () {
if(num<liLength)
num++;
myInterval();
}
});
var Auto = function(){
myInterval();
}
Auto();
});
Update: trying Combining both $(".slideMenuCont .item").stop().fadeOut(500); and
$(".slideMenuCont .item").css("display","none");

Optimize javascript code [repeats]

Can anybody help me to optimize this javascript code?
I see repeat. May I avoid this repeat?
Thanks!
var billboardTimer;
var billboardCurrent = 0;
var billboardSize = $('.billboard li').size();
$('.billboard li').on('click', function(){
clearInterval(billboardTimer);
$('.billboard li').removeClass('active');
$(this).addClass('active');
$('.billboard .img-large').removeClass('current').removeAttr('style');
$('.billboard .img-large').eq($(this).index()).animate({'opacity': 1}).show();
});
$('.billboard li:first').click();
billboardTimer = setInterval(billboardNext, 2000);
function billboardNext(){
billboardCurrent++;
if (billboardCurrent == billboardSize) {billboardCurrent = 0;}
$('.billboard .img-large').removeClass('current').removeAttr('style');
$('.billboard .img-large').eq(billboardCurrent).animate({'opacity': 1}).show();
$('.billboard li').removeClass('active');
$('.billboard li').eq(billboardCurrent).addClass('active');
}
Link jsfiddle.net

Perhaps something like this?
var billboardTimer;
var billboardCurrent = 0;
var billboardSize = $('.billboard li').size();
$('.billboard li').on('click', function(){
clearInterval(billboardTimer);
setActive($(this).index());
});
$('.billboard li:first').click();
billboardTimer = setInterval(function() {
setActive(billboardCurrent = (billboardCurrent + 1) % billboardSize);
}, 2000)
function setActive(index) {
$('.billboard .current').animate({'opacity': 0}).removeClass('current');;
$('.billboard .img-large').eq(index).animate({ 'opacity': 1}).addClass('current');
$('.billboard li').removeClass('active').eq(index).addClass('active');
}
http://jsfiddle.net/9dxcc/2/

I want to enable auto slider and infinite loop in JavaScript

<script type="text/javascript">
$(document).ready(function() {
var acch = 1;
$('.controls ul a').click(function() {
var chno = $('.slider-container li').length;
switch($(this).attr('data-gallery')){
case 'slide-left':
if (acch < chno){
acch++;
startSlide(acch);
}
break;
case 'slide-right':
if (acch <= 1){
acch = 1;
}else{
acch--;
startSlide(acch);
}
break;
}
})
function startSlide(itemNo){
var sTo = '#slider-item-' + itemNo;
$('#home-top-content').scrollTo($(sTo), 300);
}
$('.backToTop').click(function() {
$('html, body').animate({scrollTop:0}, 'slow');
})
})
</script>
This is the script listed above i need to enable auto slide function and infinite loop
http://aphex.fresh-pixel.com/
This is the link to theme which i am using, you can see the problem in slider

I think this implemetation is better, since you can add any number of sildes in the design without any chage in the code.
<script type="text/javascript">
$(document).ready(function() {
$('.controls ul a').click(function() {
moveSliders($(this));
})
function startSlide(element){
$('#home-top-content').scrollTo(element, 300);
}
$('.backToTop').click(function() {
$('html, body').animate({scrollTop:0}, 'slow');
})
setInterval(function(){
moveSliders($('.controls ul').find('a.arrow-right'));
},6000);
function moveSliders(clickElement)
{
//Get li with class active if that count is zero put it as the first li
var currentActive = $('.slider-container li.slide-active');
var firstElement = $('.slider-container li:first');
var lastElement = $('.slider-container li:last');
if(currentActive.length == 0){
firstElement.addClass('slide-active');
currentActive = firstElement;
}
switch(clickElement.attr('data-gallery')){
case 'slide-left':
//Next
var nextElement = currentActive.next();
if(nextElement.length == 0)nextElement = firstElement;
$('.slider-container li.slide-active').removeClass('slide-active');
nextElement.addClass('slide-active');
startSlide(nextElement);
break;
case 'slide-right':
//previous
var previousElement = $('.slider-container li.slide-active').prev();
if(previousElement.length == 0)previousElement = lastElement;
$('.slider-container li.slide-active').removeClass('slide-active');
previousElement.addClass('slide-active');
startSlide(previousElement);
break;
}
}
})
</script>

stop a jquery animation loop (function and nested)

How would i stop a jquery animation from loading upon user interaction?
$('#jqNav li a').click(function(){
if($(this).parent().is(".nav1")){ $('.landing .main .nav ul').css({ "background-position" : "0 -50px" });}
else if($(this).parent().is(".nav2")) { $('.landing .main .nav ul').css({ "background-position" : "0 -100px" });}
else if($(this).parent().is(".nav3")) { $('.landing .main .nav ul').css({ "background-position" : "0 -150px" });}
else if($(this).parent().is(".nav4")) { $('.landing .main .nav ul').css({ "background-position" : "0 -200px" });};
$page = $(this).attr('href');
var $hashTag = $(this).attr('name');
window.location = "#" + $hashTag;
loadData();
return false;
});
this is the user click function;
function doReplay(){
$('body')
.fadeTo(0,1,function(){
$page = $welcome;
loadData();
})
.delay(1000)
.fadeTo(0,1,function(){
$page = $startup;
loadData();
})
.delay(1000)
.fadeTo(0,1,function(){
$page = $to2m;
loadData();
})
.delay(1000)
.fadeTo(0,1, function(){
$page = $to25m;
loadData();
setTimeout(function(){doReplay();},5000);
});
}
and the above is the animation function
I have tried clearTimeout but it doesn't seem to work.

var stopAnim;
$('#jqNav li a').click(function(){
...
stopAnim = true;
}
function doReplay(){
if(!stopAnim){
// do animation
}
}

You could add a boolean value that you would check in your animation method.
if (!stopAnim) { setTimeout(function(){doReplay();},5000); }