Desperately seeking some JQuery assistance here. I feel like tossing my laptop out the window. After countless hours of coding, I've hit a roadblock that's driving me crazy.
I'll only share the relevant portions of the code since it's quite lengthy.
The project includes a navigation menu for a simulated solar system. To view the entire code, you can visit this link: http://jsbin.com/zagiko/1/edit (please note that it heavily utilizes CSS3).
In the navigation menu, clicking on items successfully assigns an 'active' class using the current script. Everything is working flawlessly in that regard. I even added a button to test the active state on click, and it functions properly. However, I'm struggling with making it respond to hover events. Despite being a beginner in JQuery, it seems like the hover function isn't triggering because it's based on the initial data rather than real-time changes. But that's just my assumption.
What I require is an if statement that reacts to live data updates (not during page load or when the document is ready). The statement should essentially instruct that if one div is active, another div can appear upon hovering. And if the first div is not active, the second div shouldn't appear.
The current if statement I came up with is:
if($("a.active").is('.uranus')){
$('#uranus .infos').hover(
function () {
$("#descriptionsp").fadeIn("2000");
})
};
Below is the existing script that initializes menus upon loading the site:
$(window).load(function(){
var e=$("body"),
t=$("#universe"),
n=$("#solar-system"),
r=function() {
e.removeClass("view-2D opening").addClass("view-3D").delay(2e3).queue(function() {
$(this).removeClass("hide-UI").addClass("set-speed");
$(this).dequeue()})
},
i=function(e){
t.removeClass().addClass(e)
};
$("#toggle-data").click(function(t){
e.toggleClass("data-open data-close");
t.preventDefault()
});
$("#toggle-controls").click(function(t){
e.toggleClass("controls-open controls-close");
t.preventDefault()
});
$("#data a").click(function(e){
var t=$(this).attr("class");
n.removeClass().addClass(t);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault()
});
Your support would be greatly appreciated. Thanks in advance!