4

I was wondering if anyone has any ideas on how to make my code more streamlined so it's not so heavy.

 var t;
 $(".sn-fresh").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-fresh").fadeIn(600);
 });

 $(".sn-salt").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-salt").fadeIn(600);
 });

 $(".sn-shoot").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-shoot").fadeIn(600);
 });

 $(".sn-eques").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-eques").fadeIn(600);
 });

 $(".sn-cloth").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-cloth").fadeIn(600);
 });

 $(".sn-brand").mouseenter(function() {
   $(".um-cat").hide();
   clearTimeout(t);
   $("#ultra-menu, #um-brand").fadeIn(600);
 });

 $("#ultra-menu").mouseleave(function() {
   clearTimeout(t);
   t = setTimeout(function() {
     $("#ultra-menu, .um-cat").fadeOut(600);
   }, 300);
 });
 $("#main-navigation a").mouseleave(function() {
   clearTimeout(t);
   t = setTimeout(function() {
     $("#ultra-menu, .um-cat").fadeOut(600);
   }, 300);
 });
 $("#ultra-menu").mouseenter(function() {
   clearTimeout(t);
   $("#ultra-menu").fadeIn(600);
 });

Improve this question
9
  • 2
    Do you have your HTML as well? Commented Jul 20, 2015 at 0:01
  • 1
    I actually don't see much wrong with this. It's a lot of code, but it seems succinct to me. Commented Jul 20, 2015 at 0:01
  • @QuinnRoundy Yeah it was really just to bring it down abit MTO produced a great idea. Commented Jul 20, 2015 at 0:20
  • Just another question about use javascript for css-tasks. I am very sad. Commented Jul 20, 2015 at 0:25
  • @PeterRader Explain what makes you think this jquery could have a CSS counterpart. This question is about simplifying Jquery code. and nothing that the Jquery is doing can be achieved with CSS otherwise I would have done so. Commented Jul 20, 2015 at 0:37

2 Answers 2

Reset to default
8

You can make it more DRY by eliminating the repeated code:

var names = ["fresh","salt","shoot","eques","cloth","brand"];

names.forEach( function( name ){
  $(".sn-"+name).mouseenter(function() {
    $(".um-cat").hide();
    clearTimeout(t);
    $("#ultra-menu, #um-" + name ).fadeIn(600);
  });
});

and either:

$("#ultra-menu, #main-navigation a").mouseleave(function() {
  clearTimeout(t);
  t = setTimeout(function() {
    $("#ultra-menu, .um-cat").fadeOut(600);
  }, 300);
});

or:

var menus = [ "#ultra-menu", "#main-navigation a" ];

menus.forEach( function( menu ){
  $(menu).mouseleave(function() {
    clearTimeout(t);
    t = setTimeout(function() {
      $("#ultra-menu, .um-cat").fadeOut(600);
    }, 300);
  });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Actually he should add a common class to his elements and add the listener only on this class. He can then detect the kind of element it is with a data-name attribute or something.
@Johnride That can't happen unfortunately.
@DCdaz why? Unless you have no control on the HTML there is no reason you can't add a class and an attribute to your elements.
You answered that yourself there. There is a couple of reasons why the class should not be changed.
1

Here is what I would do. 

$(".sn-fresh").mouseenter(yourfunction(e);
function yourfunction(){
$('.um-cat').hide();
clearTimeout(t);
$('#ultra-menu', #'+e.target.id).fadeIn(600); 
}

With this method it will dynamically do the fade in with the target parent's name.

Improve this answer

1 Comment

It's not an ID though. its a class that is different from the ID