Вопрос собственно про jquery.
Мне нужно анимировать какой-то элемент. Допустим это будет div. Необходимо сделать чтобы div сначала увеличился, потом уменьшился, потом обратно увеличился.
Я чей-то тут набросал. НО не работает. <div class="content"> <img src="images/secondhand.png" width="" class="circle1"> <img src="images/hourhand.png" width="" class="circle2"> <img src="images/circle.png" width="507px" class="circle"> </div>
$('.content').animate(
{
scale: 1.5,
scale: 0.8
}, {
duration: 400,
step: function( now, fx ){
$(this).css('-webkit-transform','scale('+now+')');
},
step: function( now, fx ){
$(this).css('-webkit-transform','scale('+now+')');
}
});
Подскажите че не так в коде. Я так и не смог разробраться с очередями и коллбэками. |
animate scale
sonntagausgang,
:cray:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>(function(e){var a=null,d=e.fn.css;e.fn.css=function(b,i){null===a&&(a="undefined"!=typeof e.cssProps?e.cssProps:"undefined"!=typeof e.props?e.props:{});if("undefined"==typeof a.transform&&("transform"==b||"object"==typeof b&&"undefined"!=typeof b.transform)){var f=a,l;b:{l=this.get(0);for(var c=["transform","WebkitTransform","msTransform","MozTransform","OTransform"],j;j=c.shift();){if("undefined"!=typeof l.style[j]){l=j;break b}}l="transform"}f.transform=l}if("transform"!=a.transform){if("transform"==b){if(b=a.transform,"undefined"==typeof i&&jQuery.style){return jQuery.style(this.get(0),b)}}else{"object"==typeof b&&"undefined"!=typeof b.transform&&(b[a.transform]=b.transform,delete b.transform)}}return d.apply(this,arguments)}})(jQuery);</script>
<script>(function(j){function i(e){var c=e.data("_ARS_data");c||(c={rotateUnits:"deg",scale:1,rotate:0},e.data("_ARS_data",c));return c}function d(e,c){e.css("transform","rotate("+c.rotate+c.rotateUnits+") scale("+c.scale+","+c.scale+")")}j.fn.rotate=function(e){var c=j(this),f=i(c);if("undefined"==typeof e){return f.rotate+f.rotateUnits}if(e=e.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/)){e[3]&&(f.rotateUnits=e[3]),f.rotate=e[1],d(c,f)}return this};j.fn.scale=function(e){var c=j(this),f=i(c);if("undefined"==typeof e){return f.scale}f.scale=e;d(c,f);return this};var b=j.fx.prototype.cur;j.fx.prototype.cur=function(){return"rotate"==this.prop?parseFloat(j(this.elem).rotate()):"scale"==this.prop?parseFloat(j(this.elem).scale()):b.apply(this,arguments)};j.fx.step.rotate=function(e){var c=i(j(e.elem));j(e.elem).rotate(e.now+c.rotateUnits)};j.fx.step.scale=function(c){j(c.elem).scale(c.now)};var a=j.fn.animate;j.fn.animate=function(e){if("undefined"!=typeof e.rotate){var c,f=e.rotate.toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/);f&&f[5]&&(c=j(this),c=i(c),c.rotateUnits=f[5]);e.rotate=f[1]}return a.apply(this,arguments)}})(jQuery);</script>
<style type="text/css">
.content{
left: 200px;
top: 50px;
position: absolute;
}
</style>
</head>
<body>
<div class="content">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="" class="circle1">
</div>
<script>
var content = $('.content');
function large()
{
content.animate({scale: '1.5'}, 1000, small)
}
function small()
{
content.animate({scale: '0.8'}, 1000, large)
}
large()
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 18:18. |