jQuery的，CSS DIV的，switch語句

-3

我

我有4格的 - DIV1，DIV2，DIV3 & DIV4 - 即滑過時，獨特的文本和圖像顯示成單獨的div被稱爲div5，內容將取決於你有什麼div滾動...

我想使用switch語句，但不知道如何通過開關案例傳遞div？

我還想動畫.stop（）。動畫當前動畫，並開始新的四個div中的任何一個翻轉.. ??
我還想在關閉鼠標滾出效果的四個div上有一個點擊功能，並且只會在其他四個div中的一個滾動或點擊時發生變化...... ??

這裏是我到目前爲止..基本上個人動畫效果，有點麻煩把他們都在一起......？

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

來源

2011-07-26 gav_aus_web

的技術清單是_not_的適當的問題標題。 –

http://tinyurl.com/so-hints –

你只具有通過類來創建的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.... 
});

來源

2011-07-26 03:25:24

試試這個

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

});

來源

2011-07-26 03:36:10 ShankarSangoli

非常感謝您的回覆，對此和varaibles的使用很好，我從閱讀您的回覆中瞭解更多。雖然我不知道這種方法將與我的工作..我使用CSS來顯示和隱藏我的div，我的文本坐在索引頁面，雖然它開始與一個CSS - 顯示：無;然後jquery更改css值...任何想法，當使用此方法.. ?? –

jQuery的，CSS DIV的，switch語句

回答

相關問題