Share with you today a small example of sliding transitions with animate-------from < a dream front end small white >
We all know that jquery offers several ways to achieve sliding effects:
But the above slide is not very convenient to control the direction of the slide, so we have to write one yourself ...
The code is as follows:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"> <title>Examples</title> <Metaname= "description"content=""> <Metaname= "keywords"content=""> <styletype= "Text/css">Body{width:100%;Height:Auto; }. Content{width:150px;Height:50px;position:Absolute;Top:20px; Left:20px;Overflow:Hidden;Background-color:Red; }. Slide-box{width:300px;position:relative; }. Slide1{width:150px;Height:50px;float: Left;Display:Inline-block;Line-height:50px;text-align:Center;Background-color:#BDD8CF; }. Slide2{width:150px;Height:50px;float: Right;Display:Inline-block;Line-height:50px;text-align:Center;Background-color:#C1C4C4; } </style> </Head> <Body> <Divclass= "Content"> <Divclass= "Slide-box clearfix"> <spanclass= "Slide1">Elements on the left</span> <spanclass= "Slide2">Elements on the right</span> </Div> </Div> <Scriptsrc= "Js/jquery-1.11.2.min.js"type= "Text/javascript"CharSet= "Utf-8"></Script> <Scripttype= "Text/javascript"> $(function(){ $(". Content"). Hover (function(){ $(". Slide-box"). Stop (true). Animate ({right:"150px"},'Slow'); },function(){ $(". Slide-box"). Stop (true). Animate ({right:"0"},'Slow'); }); }) </Script> </Body></HTML>
The above code can achieve a complete sliding effect. But one thing to note,
As shown, you need to add a stop () event to prevent multiple events that occur when the mouse moves quickly, forming a stack that causes the mouse to slide and even blink after it is removed.
Hope that the above introduction to you can help, at the same time this is also my own only the process of internal, thanks to the blog garden platform! ----from < A dream front-end small white >
Animate sliding transition effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
