writing a nice jQuery array

Question

I am new to writing Arrays, and I was wondering, if you look at the code below (not really complicated), how can I get rid of all the other stuff and just have the (height) and (width) be applied to cell_1 - cell_21

I just want to write all the repeating stuff in one line, and use the height and width as VARS

please help! :)

$(".cell_1").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'76px',padding:'0'},400)});
$(".cell_2").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'84px',height:'77px',padding:'0'},400)});
$(".cell_3").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'84px',height:'80px',padding:'0'},400)});
$(".cell_4").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'85px',height:'80px',padding:'0'},400)});
$(".cell_5").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'88px',height:'80px',padding:'0'},400)});
$(".cell_6").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'89px',height:'86px',padding:'0'},400)});
$(".cell_7").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'98px',height:'92px',padding:'0'},400)});
$(".cell_8").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'84px',height:'78px',padding:'0'},400)});
$(".cell_9").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'85px',height:'78px',padding:'0'},400)});
$(".cell_10").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'76px',padding:'0'},400)});
$(".cell_11").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'85px',height:'80px',padding:'0'},400)});
$(".cell_12").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'84px',height:'85px',padding:'0'},400)});
$(".cell_13").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'94px',height:'90px',padding:'0'},400)});
$(".cell_14").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'97px',height:'93px',padding:'0'},400)});
$(".cell_15").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'76px',padding:'0'},400)});
$(".cell_16").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'76px',padding:'0'},400)});
$(".cell_17").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'80px',padding:'0'},400)});
$(".cell_18").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'83px',height:'84px',padding:'0'},400)});
$(".cell_19").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'86px',height:'86px',padding:'0'},400)});
$(".cell_20").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'90px',height:'90px',padding:'0'},400)});
$(".cell_21").hover(function(){$(this).css({'z-index':'10'});$(this).find('img').addClass("hover").stop().animate({marginTop:'-10px',marginLeft:'-10px',top:'0',left:'0',width:'120%',height:'120%',padding:'0'},200)},function(){$(this).css({'z-index':'0'});$(this).find('img').removeClass("hover").stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'96px',height:'93px',padding:'0'},400)});

Do your cells *need* to have the different widths and heights? If so, it's you're still going to have to maintain an array of the dimensions. — Demian Brecht, May 06 '11 at 21:47
yes! thats exactly what I need, maybe I can use the getElementById method and just automatically get the img dimensions? — Jeff Voss, May 06 '11 at 21:50
Where to the height and width values come from? Why can't you just set the values back to the original values (before `hover`)? — Matt Ball, May 06 '11 at 21:52

Matt Ball · Accepted Answer · 2011-05-06T22:36:52.897

3

Start by giving all the elements a common class, call it cell. Then, something like this:

$('.cell').hover(function() {
    var $img = $(this).css({
        'z-index': '10'
    }).find('img').addClass("hover").stop(),
        origSize = $img.data('orig-size'),
        size = origSize || {height: $img.height(), width: $img.width()};

    if (!origSize) $img.data('orig-size', size);

    $img.animate({
        marginTop: '-10px',
        marginLeft: '-10px',
        width: size.width*1.2,
        height: size.height*1.2
    }, 200);
}, function() {
    var $img = $(this).css({
        'z-index': '0'
    }).find('img').removeClass("hover").stop(),

        size = $img.data('orig-size');

    $img.animate({
        marginTop: '0',
        marginLeft: '0',
        width: size.width,
        height: size.height
    }, 400)
});

Demo: http://jsfiddle.net/mattball/kN7xS/

edited May 06 '11 at 22:36

answered May 06 '11 at 21:49

Matt Ball

354,903
100
647
710

Matt Ball, you've saved me before, all my images have different sizes - i'm trying to use thishttp://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript – Jeff Voss May 06 '11 at 21:50
If all the images have different dimensions, why don't you just animate the sizes back to their previous values? – Matt Ball May 06 '11 at 21:56
well thats essentially what I'm doing, I just don't know how to put height:xx,width:xx into the variables area – Jeff Voss May 06 '11 at 21:58
Right, but you're hardcoding the height and width values. Let me show you what I mean – Matt Ball May 06 '11 at 22:00
Oh, when did I save you before? I don't recall. – Matt Ball May 06 '11 at 22:08
not sure exactly when either Matt, but I really love your jQuery style - brilliant! – Jeff Voss May 06 '11 at 22:22
1

@Matt Ball, funny little bug in that jsfiddle: wiggle the mouse back and forth between two pictures :P – Xyan Ewing May 06 '11 at 22:25
@Matt Ball, haha yep, that's perfect. Sorry to nitpick :P – Xyan Ewing May 06 '11 at 23:10
@Mully: not at all, I appreciate the input. – Matt Ball May 06 '11 at 23:10

Edgar Villegas Alvarado · Answer 2 · 2011-05-06T22:08:30.933

1

EDIT: You could do this:

 var params ={ //Put here all properties that depend specifically on each cell
       'class1': {animWidth: 83, animHeight: 76},
       'class2': {animWidth: 84, animHeight: 77},
       'class3': {animWidth: 84, animHeight: 80},
       ...
    };

        for(var i = 1; i<=21; i++){
           var class = "cell_"+i;
           var animWidth= params[class].animWidth;
           var animHeight= params[class].animHeight;       
           $("."+class).hover(... .animate(..., width: animWidth, height: animHeight, ...);
        }

Hope it's understandable. Cheers

edited May 06 '11 at 22:08

answered May 06 '11 at 21:52

Edgar Villegas Alvarado

18,204
2
42
61

right, this creates a possibility to attach information based on the index - but how would I get the image dimensions and apply it here – Jeff Voss May 06 '11 at 21:55
Hi jeffrey! nice to see you. I'm updating the solution to acomplish that too. – Edgar Villegas Alvarado May 06 '11 at 21:59
Edgar, Matt ball - thank you gentlemen I really appreciate this – Jeff Voss May 06 '11 at 22:15

writing a nice jQuery array

2 Answers2