javascript - 使用 Jquery Slide 时盒子阴影消失

Question

下面是我的 Css，我使用 Jquery UI 在两个 div 之间滑动，但是当动画发生时我失去了框阴影。你可以在这里看到演示 https://jsfiddle.net/vfu2n7dk/3/ .

  .step1,
    .step2 {
      width: 100%;
      position: absolute;
      background:blue; 
        -webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 9px 3px rgba(0,0,0,0.75);

    }

    .slidecontainer {
      position: relative;
    }


    .footer {
        color: #696767;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.51);
        padding: 12px;
        border-bottom: 2px solid #0D4413;
    }

    .clickverify {
      color: red;
      cursor: pointer;
    }

Answer 1

我对您的代码进行了一些更改，现在可以正常工作了。请检查代码片段。

希望对您有所帮助。

 $(".clickverify").click(function() {
$(".step1").animate({ left:"-110%" }); 
$(".step2").animate({ right:"0%" }); 
 });

.step1 {
  width: 100%;
  position: absolute;
  background:blue; 
    -webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 9px 3px rgba(0,0,0,0.75);
    left:0%;
    
    
}
.step2 {
  width: 100%;
  position: absolute;
  background:blue; 
    -webkit-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 9px 3px rgba(0,0,0,0.75);
    right:-100%;
    
}

.slidecontainer {
  position: relative;
}


.footer {
    color: #696767;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.51);
    padding: 12px;
    border-bottom: 2px solid #0D4413;
}

.clickverify {
  color: red;
  cursor: pointer;
}


 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="step1">
  step1
  <br>
  <br>  
  <div class="clickverify">
    NEXT STEP
  </div>
</div>

<div class="step2">
  step2
   <br>
  <br>  
</div>