Jquery, CSS DIV, переключение операторов - PullRequest
Новая
       0

Jquery, CSS DIV, переключение операторов

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

Использование jQuery -

У меня есть

У меня есть 4 div - div1, div2, div3 & div4 - что при сворачивании уникального текста и изображений в отдельный div, называемый div5, содержимое будет зависеть от того, какой div вы перевернули ...

Я думал об использовании оператора switch, но не уверен, как передать div через case переключателей ... ??

  • Я также хотел бы, чтобы анимации были .stop (). анимируем текущую анимацию и начинаем новую, когда любой из четырех дивов переворачивается .. ??

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

Вот то, что я придумал до сих пор ... в основном отдельные анимационные эффекты, с некоторыми трудностями связывая их все вместе ... ?? 

// HTML ----

<div id="maincolumn">   
<div id="js_bg">
    <div class="rollOversHolder">
        <div class="triggerFirstJsSpacer"></div>
        <div class="mainManaged"></div>
        <div class="triggerJsSpacer"></div>
        <div class="mainSolutions"></div>
        <div class="triggerJsSpacer"></div>
        <div class="mainCloud"></div>
        <div class="triggerJsSpacer"></div>
        <div class="mainLicense"></div>
    </div>
    <div class="jsCopysHolder">
        <div class="copy1Holder">
            <div class="leftCopy1">
                Test text _01
            </div>
            <div class="leftCopy2">
                Test text _02
            </div>
            <div class="leftCopy3">
                Test text _03
            </div>
            <div class="leftCopy4">
                Test text _04
            </div>
        </div>
        <div class="copy2Holder">
            <div class="copy1">
            </div>
        </div>
    </div>
</div>


/*CSS ----*/

.main1{
background:url(../images/it_sol_norm.png);
width:103px;
height:133px;
float:left;

.main2 {
background:url(../images/it_sol_norm.png);
width:103px;
height:133px;
float:left;

.main3 {
background:url(../images/it_sol_norm.png);
width:103px;
height:133px;
float:left;

.main4 {
background:url(../images/it_sol_norm.png);
width:103px;
height:133px;
float:left;

.triggerFirstJsSpacer {
width:45px;
height:133px;
float:left;

.triggerJsSpacer  {
width:70px;
height:133px;
float:left;

jsCopysHolder {
width:682px;
height:230px;
border:#CCCCCC 1px solid;
float:left;
font-size:.9em;
color::#5A5A5A;
margin-top:37px;
margin-left:15px;

copy1Holder {
width:330px;
height:150px;
float:left;

.copy2Holder {
width:330px;
height:150px;
float:left;

.leftCopy1 {
width:230px;
height:auto;
display:none;
position:relative;
color:#4d4d4d;

.leftCopy2 {
width:230px;
height:auto;
display:none;
position:relative;
color:#00FF00;

.leftCopy3 {
width:230px;
height:auto;
display:none;
position:relative;
color:#0099FF;

.leftCopy4 {
width:230px;
height:auto;
display:none;
position:relative;
color:#FF0000;




    //jQuery ----

jQuery(".main1").mouseover(function() {
    if (jQuery(".leftCopy1").is(":hidden")) {
        jQuery(".leftCopy1").slideDown("medium");
    }
});

jQuery(".main1").mouseout(function() {
    if (jQuery(".leftCopy1").is(":visible")) {
        jQuery(".leftCopy1").slideUp("medium");
    }
});

jQuery(".main2").mouseover(function() {
    if (jQuery(".leftCopy2").is(":hidden")) {
        jQuery(".leftCopy2").slideDown("medium");
    }
});

jQuery(".main2").mouseout(function() {
    if (jQuery(".leftCopy2").is(":visible")) {
        jQuery(".leftCopy2").slideUp("medium");
    }
});

jQuery(".main3").mouseover(function() {
    if (jQuery(".leftCopy3").is(":hidden")) {
        jQuery(".leftCopy3").slideDown("medium");
    }
});

jQuery(".main3").mouseout(function() {
    if (jQuery(".leftCopy3").is(":visible")) {
        jQuery(".leftCopy3").slideUp("medium");
    }
});

jQuery(".mainLicense").stop().mouseover(function() {
    if (jQuery(".leftCopy4").is(":hidden")) {
        jQuery(".leftCopy4").slideDown("medium");
    }
});

jQuery(".mainLicense").stop().mouseout(function() {
    if (jQuery(".leftCopy4").is(":visible")) {
        jQuery(".leftCopy4").slideUp("medium");
    }
});

Ответы [ 2 ]

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

Попробуйте это 

var lastDiv;
$("#div1, #div2, #div3, #div4").hover(function(){
  lastDiv = $(this);

 $(this).animate({});//Pass the animation properties

 $("#div5").html("Set the required text");
  //You can access the rolled over div using $(this)

}, function(){
  $(this).stop();
}).click(function(){
  if(lastDiv)
    lastDiv.stop();

});
0 голосов
/ 26 июля 2011

Вам просто нужно создать обработчики для div'ов через класс: 

$('.div_class').hover(function(){
    //stop all animation
    $('.div_class').stop();

    //animate the current one
    $(this).animate(options);
}).click(function(){
    //not sure what you want on click....
});
...