Question

使用jQuery -

我有

我有4个div - div1，div2，div3＆amp; DIV4 - 当滚动的唯一文本和图像显示在一个名为div5的单独div中时，内容将取决于您已滚动的div ...

我正在考虑使用switch语句，但我不确定如何通过switch case传递div ... ??

我也希望将动画设置为.stop（）。当四个div中的任何一个被翻转时动画当前动画并开始新动画。??
我还希望在四个div上有一个点击功能，可以关闭mouseout rollOver效果，只有当其他四个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();

});

Jquery，CSS DIV，Switch语句

2 个答案: