jquery effect - скользить скрытый div вниз / вверх, скрытие в настоящее время показывает скрытый div - PullRequest
Новая
       14

jquery effect - скользить скрытый div вниз / вверх, скрытие в настоящее время показывает скрытый div

2 голосов
/ 16 августа 2011

* Сценарий

Я хочу создать эффект jquery, подобный тому, который можно найти на этом сайте, который расположен справа от основной вспышки, добавить:

http://www.commbank.com.au/

* Задача

Я только что начал, но столкнулся с небольшим затруднением с помощью метода muy ... возможно, это не лучший способ достичь желаемогоэффект, пожалуйста, сообщите и спасибо заранее !!

Мой код можно найти здесь:

http://jsfiddle.net/gavAusWeb/HSbzC/1/

Также я буду отображать его ниже:

* HTML 

<div id="latestNewsJs">              
    <div id="lnClickDivs1" class="sideJsBtns sidejsbtn1"></div>
    <div id="hiddenDiv1" class="secretDiv"></div>
    <div id="lnClickDivs2" class="sideJsBtns sidejsbtn2"></div>
    <div id="hiddenDiv2" class="secretDiv"></div>        
    <div id="lnClickDivs3" class="sideJsBtns sidejsbtn3"></div>
    <div id="hiddenDiv3" class="secretDiv"></div>
    <div id="lnClickDivs4" class="sideJsBtns sidejsbtn4"></div>
    <div id="hiddenDiv4" class="secretDiv"></div>
</div>

* CSS 

#latestNewsJs {
    border:1px solid red;
    width:106px;
    min-height:100%; 
}
#lnClickDivs1 {}
#lnClickDivs2 {}
#lnClickDivs3 {}
#lnClickDivs4 {}

.sideJsBtns {
    width:106px;
    height:30px;
    position:relative;
    float:left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius:5px 5px 5px 5px;
    border:1px solid #CCCCCC;
}

#hiddenDiv1 {}
#hiddenDiv2 {}
#hiddenDiv3 {}
#hiddenDiv4 {}

.secretDiv {
    background:orange; 
    width:106px; 
    height:100px; 
    display:none; 
    margin-top:-7px;
    float:left;
}

* jquery 

jQuery.noConflict();

jQuery(document).ready(function(){         

    var curI = 0;

    jQuery('.sideJsBtns').click(function(){

        curI = jQuery(this).index() + 1;

        jQuery(".secretDiv").slideUp("medium");

        if (jQuery("#hiddenDiv" + curI).is(":hidden")) 
        {
            jQuery("#hiddenDiv" + curI).slideDown("medium");
        } else {
            jQuery("#hiddenDiv" + curI).slideUp("medium");
        }

    });

});

Ответы [ 2 ]

1 голос
/ 16 августа 2011

Или используйте этот код без index ()

http://jsfiddle.net/HSbzC/3/

1 голос
/ 16 августа 2011

В вашем коде вы используете метод index() для получения индекса элемента.Если вы не передадите какой-либо селектор этому методу, он даст индекс относительно всех своих братьев и сестер.

Посмотрите на эту скрипку, я исправил ее

http://jsfiddle.net/HSbzC/2/

...