Of Stack

jQuery to achieve horizontal buffered motion effect of with demo source download

  • 2020-12-09 00:43:59
  • OfStack

An example of jQuery's horizontal motion with buffer is presented in this paper. To share for your reference, the details are as follows:

Here, jQuery is used to generate horizontal motion with buffering, which can be activated by clicking 1 with the mouse. After clicking 1, it can be seen that the Div layer is doing horizontal motion, thus many other forms of animation effects can be derived.

Click here for an online demonstration.

The specific code is as follows: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> The level of mobile </title>
<style type="text/css">
*{margin:0;padding:0;}
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $("#panel").click(function(){
    $(this).animate({left: "500px"}, 3000);
  })
})
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

Click here to download the complete example code.

For more information about jQuery special effects, please refer to: Summary of jQuery Animation and Special Effects usage and Summary of Common Classic Special Effects of jQuery.

I hope this article has been helpful in jQuery programming.

Related articles: