jquery - working with event handlers

First up... Thank-you in advance!

• I have 4 divs.

• When each div is rolled-over i want divs with unique text to appear within another div that has a class name of '.rollOversHolder'

• The text divs all contain an id of '#copy' but all have unique class names eg. '.copy1', '.copy2' etc

• I want the '#copy' divs to be individually displayed within the '.rollOversHolder' div and when another button is rolled over i want to current animation to stop and the new one begin.

HTML ---

<div class="rollOversH开发者_运维问答older">
        <div id="main1" class="rollOver_1"></div>
        <div id="main1" class="rollOver_2"></div>
        <div id="main1" class="rollOver_3"></div>
        <div id="main1" class="rollOver_4"></div>                  
</div>

<div class="emptyCopyClass"></div>

<div id="copy" class="copy1">
    Test text _01
</div>
<div id="copy" class="copy2">
    Test text _02
</div>
<div id="copy" class="copy3">
    Test text _03
</div>
<div id="copy" class="copy4">
    Test text _04
</div>

jQuery -----

  function slideDownFunc() {
        if(jQuery("#copy.copy1")){
            if (jQuery("#copy.copy1").is(":hidden")) {
                jQuery("#copy.copy1").stop().slideUp("medium");
            }
        }else if(jQuery("#copy.copy1")){
            jQuery("#copy.copy1").stop().slideUp("medium");
        }
    };

    function slideUpFunc() {
        if(jQuery("#copy.copy2")){
            if (jQuery("#copy.copy2").is(":visible")) {
                jQuery("#copy.copy2").stop().slideDown("medium");
            }
        }else if(jQuery("#copy.copy2")){
            jQuery("#copy.copy2").stop().slideDown("medium");
        }
    };

jQuery("#main1.rollOver_1").mouseover(function(){
        slideDownFunc();
    }).mouseout(function(){
        slideUpFunc();
});

jQuery("#main1.rollOver_2").mouseout(function(){
        slideDownFunc();
    }).mouseout(function(){
        slideUpFunc();
});

CSS ----------

.rollOversHolder {
    width:710px;
    height:135px;
    border:#CCCCCC 1px solid;
}

#main1 {
    background:url(../images/it_sol_norm.png);
    width:103px;
    height:133px;
    float:left;
}

.emptyCopyClass {
    width:230px;
    height:150px;
    position:relative;
    color:#4d4d4d;
    border:1px solid red;
}

#copy {
    width:230px;
    height:150px;
    position:relative;
    display:none;
    color:#4d4d4d;
}

Update

I have set the rollOversHolder to wrap around hover copy, set same dimensions to one hover-able content set. Set all items to position absolute so that animation can occur on 1 set location. on animation i am setting the z-index to show relative content.

Check the following: http://jsfiddle.net/aP2r3/8/

HTML

<div class="rollOversHolder">
    <div id="main1" class="rollOver_1 rollover">test1</div>
    <div id="main2" class="rollOver_2 rollover">test2</div>
    <div id="main3" class="rollOver_3 rollover">test3</div>
    <div id="main4" class="rollOver_4 rollover">test4</div>                  
</div>

<div class="rollOversHolder">

    <div id="Copy1" class="copy1 copy">
        01
    </div>
    <div id="Copy2" class="copy2 copy">
        02
    </div>
    <div id="Copy3" class="copy3 copy">
        03
    </div>
    <div id="Copy4" class="copy4 copy">
        04
    </div>

</div>

Jquery

$(function() {
    var curI = 0;
    jQuery(".rollover").hover(function() {

        //index() gets index value started from 0 - Id values starts from 1, that's why the + 1.
        curI = $(this).index() + 1;

        //Set all hover copy to lower layer of display
        $('.copy').css('z-index', '1');

        //Set hovered copy to higher layer of display
        $('#Copy' + curI).css('z-index', '100');

        //Set dimension again, coz stop() animation may reset original dimensions
        $('.copy').css('width', '103px');
        $('.copy').css('height', '133px');

        //Stop all animation and slideDown the hovered Item
        $('#Copy' + curI).stop().slideDown(500);


    }, function() {

        //Set hovered copy to higher layer of display
        $('.copy').css('z-index', '1');

        //Stop all animation and slideUp to last item on mouse out
        $('#Copy' + curI).stop().slideUp(500);

    });


});

Please let me know if this is working for you.

UPDATE [click event]

You can have a look at this : http://jsfiddle.net/aP2r3/9/

For a click event, see my following code (You can just change the class names to be more relevant)

Jquery :

$(function() {
    var curI = 0;
    jQuery(".rollover").click(function() {

        //index() gets index value started from 0 - Id values starts from 1, that's why the + 1.
        curI = $(this).index() + 1;

        //Set all hover copy to lower layer of display
        $('.copy').css('z-index', '1');

        //Set hovered copy to higher layer of display
        $('#Copy' + curI).css('z-index', '100');

        //Set dimension again, coz stop() animation may reset original dimensions
        $('.copy').css('width', '103px');
        $('.copy').css('height', '133px');

        //Hiding all except the relative content and showing the clicked content
        $('.copy:not(#Copy' + curI + ')').stop(true, true).slideUp(500, function() {
            $('#Copy' + curI).slideDown(500);
        })

    });

});