jquery - 使用事件处理程序

Question

首先...先谢谢您！

• 我有 4 个 div。

• 当每个 div 滚动时，我希望具有唯一文本的 div 出现在类名为“.rollOversHolder”的另一个 div 中

• 文本 div 都包含 id“#copy”，但都具有唯一的类名称，例如。 '.copy1'、'.copy2' 等

• 我希望 '#copy' div 单独显示在 '.rollOversHolder' 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;
}

Answer 1

更新

我已将 rollOversHolder 设置为环绕悬停副本，将相同的尺寸设置为一个可悬停内容集。将所有项目设置为绝对位置，以便动画可以在 1 个设定位置上发生。在动画上，我设置 z-index 以显示相对内容。

检查以下内容：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);

    });


});

请告诉我这是否适合您。

更新[点击事件]

您可以看看这个：http://jsfiddle. net/aP2r3/9/

对于点击事件，请参阅我的以下代码（您可以更改类名以使其更相关）

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

    });

});