Arrow animation in jquery
Is it possible to make an animation of this picture[1] to this picture[2] in jquery?. I would like to get "a growing arrow effect". I must admit that after some searching i found nothing and simple
$('#img').animate({width: '109px',height: '109px'});
is not enough effect for me. Ma开发者_如何转开发ybe you guys have some clues or tips to achieve that kind of effect.
[1] http://img543.imageshack.us/i/arrowmb.png/
[2] http://img687.imageshack.us/i/pngqa.png/
UPDATED: Try the code now, it shows the arrow in a green box contained on a red box and a click in the red box will grow and shrink the arrow compensating movement. Of course the boxes are for display purposes only you can remove the borders from the css.
The arrow was not moving anyway, the effect was because the image you provided has a blank space around the arrow which of course it also grow. You can clip the image to avoid having to compensate movement but anyway, the example illustrates that other properties can be also animated.
You just need to play a bit with the parameters to get the effect you are after.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js">
</script>
<script>
$(document).ready(function() {
$('.arrow_container').click(function() {
$('img.arrow').animate({
width: '+=70', height: '+=70', left: '-=15', top: '-=10'
});
$('img.arrow').animate({
width: '-=70', height: '-=70', left: '+=15', top: '+=10'
});
});
});
</script>
<style>
.arrow_container {
margin-left:30px;
margin-top:30px;
width:100px;
height:100px;
border: 1px solid red;
}
.arrow {
position:absolute;
width:30;
height:30;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="arrow_container">
<img class="arrow"
src="http://img687.imageshack.us/img687/9180/pngqa.png">
</div>
</body>
</html>
加载中,请稍侯......
精彩评论