Как оживить изображение с помощью jquery

Я хочу, когда я нажимаю кнопку hit-me, изображение будет двигаться вперед и вернуться к предыдущей позиции. Это повторяется снова и снова, когда я нажимаю кнопку hit-me.Как оживить изображение с помощью jquery

Теперь проблема в том, когда я нажимаю хит-я кнопку изображение двигаться вперед, но он не вернется в предыдущее положение.

извините за мой плохой английский.

следующий мой код.

boxing.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Employee Management System</title> 
    <!-- Sets initial viewport load and disables zooming --> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/ems.css"> 
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. --> 
    <!--[if lt IE 9]> 
     <script src="js/html5shiv.js"></script> 
     <script src="js/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body> 

     <!--nav--> 
     <nav class="navbar navbar-inverse" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">Employee Management System</a> 
      </div> 
      <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a class="nav-link" href="#">Home</a></li> 
       <li><a class="nav-link" href="#">Login</a></li> 
       <li><a class="nav-link" href="#">Organization</a></li> 
       <li><a class="nav-link" href="#">Contact Us</a></li> 
      </ul> 
      </div> 
     </div> 
     </nav> 


     <div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
      <div class="panel panel-primary"> 
       <div class="panel-heading"> 
       <h4 class="panel-title">Boxing</h4> 
       </div> 
       <div class="panel-body"> 
       <img class="ring" src="img/ring.jpg" alt=""> 
       <img class="hand" src="img/hand.jpg" alt=""> 
       <div class="center"> 
        <button id="save-btn" class="game-btn btn btn-primary">Save</button> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <button id="hit-btn" class="game-btn btn btn-danger">Hit</button> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 

     <script src="js/jquery-1.10.1.min.js"></script> 
     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="js/boxing.js"></script> 

    </body> 
    </html>

boxing.js

$(document).ready(function(){ 
    $('#hit-btn').on('click', function(){ 
     $('.hand').css({ 
      "-webkit-transform":"translateX(100px)", 
      "-ms-transform":"translateX(100px)", 
      "transform":"translateX(100px)" 
     }) 
    }); 
});

источник

2015-07-27 Surendra Singh Rana

пожалуйста, вы можете добавить свой код в скрипку. – Steevan

Вы попробуйте взглянуть на это?

http://www.w3schools.com/jquery/jquery_animate.asp

источник

2015-07-27 15:26:07 Thibault

спасибо ... ** Thibault ** –

<script> 
$(document).ready(function(){ 
    $('#hit-btn').on('click', function(){ 
    $(".hand").animate({ "left": "+=50px" }, "slow" , function(){ 
     $(".hand").animate({ "left": "-=50px" }, "slow"); 
    }); 
    }); 
}); 
</script>

попытка JQuery одушевленным.

источник

2015-07-27 15:29:30

Вы можете ознакомиться по следующей ссылке. Это именно то, что вы хотите.

http://jsfiddle.net/gt5d7/9/

 $(document).ready(function() { 
    var sideMenu = false; 
    $("#wel1").click(function() { 
     if (!sideMenu) { 

     sideMenu = true; 
      $("#sidemenu").animate({ 
       "left": "300px" 
      }, 3000); 
     } 
     else { 
     $("#sidemenu").animate({left: "0px"}, 3000); 

     sideMenu = false;  
     } 
    }); 
});

источник

2015-07-27 15:38:46 Steevan

Как оживить изображение с помощью jquery

ответ

Смежные вопросы