CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Vishnu
Vishnu

Reputation: 2452

Box-shadow Disappearing while using Jquery Slide

Below Is my Css, I am using Jquery UI to slide between two div ,But I am loosing box shadow when Animation occurs.You can see the demo here 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;
    }

Upvotes: 0

Views: 382

Answers (1)

Ajay Malhotra
Ajay Malhotra

Reputation: 838

I have done some changes in your code and it's working now. Please check the CODE SNIPPET.

I hope it will help you.

 $(".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>

Upvotes: 1

Related Questions