使用事件处理程序

首先…提前感谢!

• 当每个div被翻转时，我希望div具有唯一的文本出现在另一个类名为'. rolloverholder '的div中

• 文本div都包含一个'#copy'的id，但都有唯一的类名。＇．copy1 ', '。copy2"等

• 我想让'#copy'div单独显示在'。rolloverholder 'div，当另一个按钮滚动时，我希望当前动画停止，新动画开始。

HTML——

<div class="rollOversHolder">
        <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;
}

<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>

$(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);
    });

});

$(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);
        })
    });
});