jQuery implements horizontal motion effect with horizontal buffering (with demo source code download)

jQuery implements horizontal motion effect with horizontal buffering (with demo source code download)_jquery

WBOY

Release： 2016-05-16 15:17:00

Original

1289 people have browsed it

The example in this article describes jQuery’s implementation of horizontal motion effects with horizontal buffering. Share it with everyone for your reference, the details are as follows:

JQuery is used here to generate horizontal buffered horizontal motion, which can be activated by clicking the mouse. After clicking, you can see that the Div layer is moving horizontally, from which many other forms of animation effects can be derived.

Click here to view the 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>水平移动</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>

Copy after login

Click here for complete example codeDownload from this site.

Readers who are interested in more content related to jQuery special effects can check out the special topics on this site: "Summary of jQuery animation and special effects usage" and "Summary of common classic special effects of jQuery"

I hope this article will be helpful to everyone in jQuery programming.