jquery - работа с обработчиками событий - PullRequest
Новая
       1

jquery - работа с обработчиками событий

0 голосов
/ 27 июля 2011

Сначала ... Спасибо заранее!

  • У меня есть 4 дел.

  • Когда каждый элемент div пролонгирован, я хочу, чтобы элементы div с уникальным текстом появлялись в другом элементе div с именем класса '.rollOversHolder'

  • Все текстовые div содержат идентификатор «#copy», но все имеют уникальные имена классов, например. '.copy1', '.copy2' и т. д.

  • Я хочу, чтобы элементы div "#copy" отображались отдельно в элементе div ".rollOversHolder", а когда при наведении курсора на другую кнопку я хочу остановить текущую анимацию и начать новую. *

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

1 Ответ

2 голосов
/ 27 июля 2011

Обновление

Я установил 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/

Для события click, см. Мой следующий код (Вы можете просто изменить имена классов, чтобы они были более релевантными)

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

    });

});
...