Jquery、CSS DIV、Switch 语句

Question

使用 jQuery -

我有

4 个 div - div1、div2、div3 和 div3。分区4 - 当滚动的唯一文本和图像显示到一个名为 div5 的单独 div 中时，内容将取决于您滚动的 div...

我正在考虑使用 switch 语句，但不确定如何传递divs 通过开关盒...??

• 我还希望动画能够停止()。为当前动画设置动画，并在四个 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");
    }
});

Answer 1

您只需通过一个类为 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....
});

Answer 2

试试这个

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

});