jQuery: is there a way to make this code more compact? -
if mouseover class1a, css of class2a , class2b change.
it's same pattern on , on again class names keep changing.
it's resulting in lot of code..i'm wondering if there's way use jquery make more compact?
note, willing change class names...just have able distinguish them see in code...
$('.class1a').mouseover(function(){ $('.class2a, .class2b').css( {height : '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 can predefine variables selectors , css objects have multiple occurances, 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); });
Comments
Post a Comment