By clicking a button, I want my box to open with a transition

Asked

Viewed 141 times

0

I have a box:

.box1 {
  width: 470px;
  height: 64px;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  background: #fbfcee;
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  top: 50px;
  margin-left: 333px;
  animation: help;
animation-duration: 2s;
animation-iteration-count: infinite;
    padding-top: 7px;
    padding-left: 7px;
}

And I have a way to open it, from one click on a certain button: 

<script>
$(document).ready(function(){
    $(".box2").click(function(){
        $(".menusec").toggle();
    });
});
     $(document).ready(function(){
    $(".fechar").click(function(){
        $(".menusec").hide('slow');
    });
});
</script>

HTML From the button that when I click on it, my box appears:

<div class="menusec" style="display: none;"></div> 


<div class="row">
    <div class="box1">
         <a href="#" class="box2">EM QUE POSSO AJUDAR?</a>
    </div>
         <span class="fechar">X</span>
    </div>
</div>

I wanted to know how to do so that when I clicked on the button, my box opened but not grotesquely, it will instantaneously, I wanted to put some 2 seconds of transition for example, for it to open, and when it reaches 2 seconds to reach the full scale. I await your response, grateful!

jquery css html5

  • You can add HTML as well?

  • can use jQuery fadein() function

  • Thank you, fadein() helped!

1 answer

0

I added the function fadeIn() and fadeOut()

$(document).ready(function(){
  
    $(".box2").click(function(){
        $(".menusec").fadeIn("slow");
    });

  $(".fechar").click(function(){
        $(".menusec").fadeOut("slow");
    });
  
});
.box1 {
  width: 470px;
  height: 64px;
  border-radius: 5px;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
  background: #fbfcee;
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  top: 50px;
  margin-left: 333px;
  animation: help;
animation-duration: 2s;
animation-iteration-count: infinite;
    padding-top: 7px;
    padding-left: 7px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menusec" style="display: none;">oioioioioioi</div> 


<div class="row">
    <div class="box1">
         <a href="#" class="box2">EM QUE POSSO AJUDAR?</a>
    </div>
         <span class="fechar">X</span>
    </div>
</div>

Browser other questions tagged jquery css html5

You are not signed in. Login or sign up in order to post.