jQuery: is there a way to make this code more compact?

If you mouseover class1a, then the CSS of class2a and class2b change.

It's the same pattern over and over again but the class names keep changing.

It's resulting in a lot of code..I'm wondering if there's a way to use jQuery to make it more compact?

Note, I am obviously willing to change the class names...just have to be able to distinguish them as you see in this code...

$('.class1a').mouseover(function(){
   $('.class2a, .class2b').css( {height :开发者_如何学Python '50px' , top: '75px'});
}).mouseout(function(){
    $('.class2a, .class2b').css({height : '25px' , top: '100px'});
  });

$('.class1b').mouseover(function(){
   $('.class2c, .class2d').css({height : '50px' , top: '75px'});
}).mouseout(function(){
    $('.class2c, .class2d').css({height : '25px' , top: '100px'});
  });

You could use .hover():

$('.class1a').hover(function(){
   $('.class2a, .class2b').css( {height : '50px' , top: '75px'});},
   function(){
    $('.class2a, .class2b').css({height : '25px' , top: '100px'});}
 );

To simplify the code you could add the "default css" (25px height etc.) to the css definitions of class2a and class2b, add a .hover class that contains the css for the mouseover part then use toggleClass() to override this setting on hover:

 $('.class1a').hover(function()
 { $('.class2a, .class2b').toggleClass("hover");});

 $('.class1b').hover(function()
 { $('.class2c, .class2d').toggleClass("hover");});

you can predefine variables with selectors and css objects that have multiple occurances, also you can use .hover() method

var s1 = '.class2a, .class2b';
var s2 = '.class2c, .class2d';
var css1 = {height : '50px' , top: '75px'};
var css2 = {height : '25px' , top: '100px'};

$('.class1a').hover(function(){
    $(s1).css(css1);
}, function(){
    $(s1).css(css2);
});

$('.class1b').hover(function(){
    $(s2).css(css1);
}, function(){
    $(s2).css(css2);
});

Depending on browser support requirements/HTML structure can you not achieve this using the :hover selector in your CSS?

I really dislike making N copies of code like this so I thought of a different approach. I would wonder if you can use the structure of the page to discern which elements you want to change when the mouse hovers over a different element. For example, if the thing you're hovering over and the things you want to change during the hover can be put into a common parent container, then you can use the structure of the page to make them all work with one set of jQuery like this and appropriate class name assignment:

$(".blob").hover(function() {
    $(this).parent().find(".changeMe").addClass("myHover");
}, function() {
    $(this).parent().find(".changeMe").removeClass("myHover");
});

This CSS hooks up the hover function to all instances of class "blob". Then, in the handler, it gets the current element (the one that was hovered), gets it's parent, then finds all items within that parent that have a class of "changeMe" and adds to the ones it finds, the class "myHover".

The HTML shell would look like this:

<div class="combo">
<div class="blob"></div>
<div class="changeMe"></div>
</div>

If the real world example is more complicated than a shared parent, you just have to code whatever the relationship is into the one piece of jQuery code and then let it work for all the instances. For example, you could even grab the class name of the hovered object (let's say it was "level3", parse out the root name "level" and the number 3, then add one to the number and add a class to all objects with the "level4" class. Since it's JS, you can invent any algorithm that matches your HTML structure. The benefit is you write one piece of code that works for all your objects rather than repeating the code over and over again.

And, you can have as many of these pieces of HTML that are all served by the one piece of jQuery. You can add other classes and obviously put different content or other divs in each copy of this structure.

If you want more than one thing to be modified the same way, then just include more than one div inside the parent that has the "changeMe" class on it and they will all get modified. The second block in the jsFiddle shows how multiple things in the same block can be modified with this same code.

You can see it work here: http://jsfiddle.net/jfriend00/XW75p/. Hover the mouse over any blue bar. All the blue bars are controlled by the single piece of jQuery.

In addition, by using class names instead of settings the CSS in code, you can even have different objects respond to the same jQuery code in different ways. You use the common class names to trigger the jQuery behavior and then you can always assign unique class names too that allow you to make the behavior unique (in CSS).