search

Home >Web Front-end >JS Tutorial >jQuery implements horizontal motion effect with horizontal buffering (with demo source code download)_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:17:001352browse

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>

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.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js formatting amount and bank card number in the input box_javascript skillsNext article：js formatting amount and bank card number in the input box_javascript skills

Related articles

See more