2

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)});
Improve this question
4
  • 1
    Why do you have 21 different class names for your cells? Commented May 6, 2011 at 21:46
  • 1
    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. Commented May 6, 2011 at 21:47
  • yes! thats exactly what I need, maybe I can use the getElementById method and just automatically get the img dimensions? Commented May 6, 2011 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)? Commented May 6, 2011 at 21:52

2 Answers 2

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

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
If all the images have different dimensions, why don't you just animate the sizes back to their previous values?
well thats essentially what I'm doing, I just don't know how to put height:xx,width:xx into the variables area
Right, but you're hardcoding the height and width values. Let me show you what I mean
@Matt Ball, funny little bug in that jsfiddle: wiggle the mouse back and forth between two pictures :P
|
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

Improve this answer

3 Comments

right, this creates a possibility to attach information based on the index - but how would I get the image dimensions and apply it here
Hi jeffrey! nice to see you. I'm updating the solution to acomplish that too.
Edgar, Matt ball - thank you gentlemen I really appreciate this

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.