Question

首先......先谢谢你！

我有4个div。
当每个div被翻转时，我希望具有唯一文本的div出现在另一个具有类名为“.rollOversHolder”的div中
文本div包含一个'#copy'的id，但都有唯一的类名，例如。 '.copy1'，'。copy2'等
我希望'#copy'divs单独显示在'.rollOversHolder'div中，当另一个按钮翻转时，我希望当前动画停止并且新动画开始。
< / LI>

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

    });

});

jquery - 使用事件处理程序

1 个答案: