-3

I am trying to press button in animated way by pressing Enter keyboard. I can click button when Enter is pressed, but animation is not playing. But when I click the button with mouse it is animating. My purpose is not using mouse but Enter keyword. How can I solve this problem. Any help is appreciated.

function myFunction() {
       console.log('pressed');
}

$(document).keypress(function (event) {
       if (event.keyCode === 13 ) {
           // $("#btnSearch").click();
           myFunction();
           alert('btnSearchClick');
       }
  })
 .button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #000000;   
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  margin-top: 20%;
  margin-left: 45%;
}

.button:hover {background-color: #000000}
    
.button:active {
  background-color: #000000; 
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bigg">
    <div class="item-animate">
        <button class="button" id="btnSearch">Start</button>
    </div>
</div>

I took animated button w3schools

نور
  • 1,425
  • 2
  • 22
  • 38
Abdurahim Ergashev
  • 1
  • 2
  • Look at different event triggers .This question seems in your direction to what you are asking. https://stackoverflow.com/questions/51318357/triggering-submit-button-with-enter-keypress-event-and-mouse-click – exception_thrown Aug 10 '20 at 16:54
  • 4
    Does this answer your question? [Triggering submit button with Enter keypress event and mouse click](https://stackoverflow.com/questions/51318357/triggering-submit-button-with-enter-keypress-event-and-mouse-click) – exception_thrown Aug 10 '20 at 16:55
  • Yes I saw all these examples. But my question a bit different. I also almost same as shown in other answers. But I need to make button pressed animation. How can I do that? I suppose in my case ```transform: translateY(4px);``` is doing animation whentbutton is pressed with mouse. I need to move this animation inside ```javascript``` function. – Abdurahim Ergashev Aug 10 '20 at 17:00

1 Answers1

-1

You just have to change css in your function by using .css Check out this doc https://www.w3schools.com/jquery/jquery_css.asp

function myFunction() {
     $('#btnSearch').css('transform', 'translateY(4px)');
}

$(document).keypress(function (event) {
       if (event.keyCode === 13 ) {
           // $("#btnSearch").click();
           myFunction();
       }
  })
 .button {
  transition: transform .25s ease-out;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #000000;   
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  margin-top: 20%;
  margin-left: 45%;
}

.button:hover {background-color: #000000}
    
.button:active {
  background-color: #000000; 
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bigg">
    <div class="item-animate">
        <button class="button" id="btnSearch">Start</button>
    </div>
</div>
mttetc
  • 711
  • 5
  • 12