When I click a button, I want my box to open with a transition

Question

When I click a button, I want my box to open with a transition

Navigation

#1 by (0 votes)

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 a click on a particular button:

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

The HTML of 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 it so that when I clicked the button, my box opened but not grotesquely, it goes instantly, I wanted to put a 2-second transition, for example, to open it, and when it reaches 2 seconds, reach the full scale . I await your reply, grateful!

jquery html5 css

asked by anonymous 16.10.2016 / 22:31

1 answer

Inserting a string into a list of ints Recover from the database the "data- * value" attribute of a field through jquery

score 0 · Answer 1

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><divclass="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>