by Felipe Lambert
22. October 2009 10:49
A alguns dias programei por necessidade um loop de animação utlilizando Jquery,
venho compartilhar o script simples.
<title>Untitled 1</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout("flashing()",300);
});
function flashing()
{
$("#flash2").animate({"opacity":".0"},1000).animate({"opacity":"1"},1000);
$("#mov1").animate({"left":"1000"},10000).animate({"left":"-100"},10000);
setTimeout("flashing()",3000);
}
</script>
<style type="text/css">
#flash {
background-color: lime;
height: 100px;
}
#flash2 {
background-color: blue;
height: 100px;
margin-top: -100px;
float: left;
position: relative;
width: 100%;
}
#mov1{
height:50px;
width:50px;
background-color:green;
color:white;
position:relative;
left:-100px;
}
body{
font-family:"Segoe UI", Tahoma, Geneva, Verdana ;
}
</style>
</head>
<body>
<div id="flash">
<span lang="pt-br">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur at dolor at orci dictum gravida. Phasellus a nulla at lorem consequat
dignissim quis eget mi. Morbi ante risus, tincidunt vitae imperdiet vel, scelerisque
a sem. Pellentesque blandit mauris vel tortor vestibulum at hendrerit est vehicula.
Aliquam ac tempor magna. Donec eget arcu nec libero tristique sollicitudin.
Donec convallis interdum felis in sodales. Praesent velit velit, tristique a
pellentesque ac, posuere ac massa. Phasellus cursus quam sed mi suscipit pretium.
Morbi faucibus ornare viverra.</span></div>
<div id="flash2">
<span lang="pt-br" style="color: white;">Cras justo magna, adipiscing at mattis
in, venenatis sit amet nisi. Integer interdum ligula eget mi blandit varius.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Phasellus ac massa vitae enim tincidunt venenatis eu nec massa. Quisque
tristique massa eu metus porttitor vulputate. Vivamus imperdiet quam rutrum
turpis sagittis in placerat neque interdum. Aliquam id orci non massa accumsan
bibendum feugiat nec lorem. Pellentesque mattis tempor lobortis. Pellentesque
nisi est, adipiscing vitae pellentesque a, mattis at purus. Ut elit erat, lacinia
vel ullamcorper id, commodo in leo. Ut quis viverra sem.</span></div>
<div style="">
Morbi id risus mi. Donec et mi in ante mattis ullamcorper. Fusce adipiscing
sem nec purus luctus eget vestibulum enim vestibulum. Morbi augue purus, consequat
vitae convallis vel, cursus sed elit. Vivamus consectetur augue a ante gravida
rhoncus. Nam eget nulla dignissim felis cursus molestie. Praesent non eleifend
dui. Sed sed odio a orci mollis dapibus id sit amet nulla. Aliquam consectetur,
libero at lobortis tempus, nunc purus euismod urna, in auctor massa ligula ac
sapien. Nullam gravida egestas eros, in scelerisque lectus rhoncus a. Vestibulum
ullamcorper odio eget nibh scelerisque ullamcorper. Morbi mollis eleifend quam,
a lobortis lectus laoreet vel. Curabitur laoreet feugiat risus sit amet semper.
Donec in lobortis purus. Aliquam erat volutpat. Nullam malesuada, urna eu porta
consectetur, sapien elit vehicula ante, in molestie augue orci a sapien.
</div>
<div id="mov1">
Lorem ipsum
</div>
</body>
</html>
DEMO
Ate +
fd12d1d6-3c07-4e57-8c20-73aa9fa25b96|0|.0