所以基本上我有点击动画的两个元素（它们变得更大）并开始旋转。
问题是，点击另一个后，我想要前一个，回到原来的状态。我可以阻止它，但我无法“动画下来”它的原始状态。任何想法？
$('.box').hover(function(){
$('.box').removeClass('grey')
});
$('.box').on('click',function(event){
$('.hex-ring1,.hex-ring2,.hex-ring3').stop();
$(this).animate({top:'30px',height:'+=100px',width:'+=20px'}, 1000);
$(this).children('img').animate({width:'+=20px',height:'+=20px'},1000)
$(this).children('.hex-ring1').rotate({ startDeg:7,duration:1,count:99999,forceJS:true });
$(this).children('.hex-ring2').rotate({ startDeg:45,duration:3,count:99999,forceJS:true });
$(this).children('.hex-ring3').rotate({ startDeg:90,duration:5,count:99999, forceJS:true });
});
/*
jQuery-Rotate-Plugin v0.2 by anatol.at
http://jsfiddle.net/Anatol/T6kDR/
*/
$.fn.rotate=function(options) {
var $this=$(this), prefixes, opts, wait4css=0;
prefixes=['-Webkit-', '-Moz-', '-O-', '-ms-', ''];
opts=$.extend({
startDeg: false,
endDeg: 360,
duration: 1,
count: 1,
easing: 'linear',
animate: {},
forceJS: false
}, options);
function supports(prop) {
var can=false, style=document.createElement('div').style;
$.each(prefixes, function(i, prefix) {
if (style[prefix.replace(/\-/g, '')+prop]==='') {
can=true;
}
});
return can;
}
function prefixed(prop, value) {
var css={};
if (!supports.transform) {
return css;
}
$.each(prefixes, function(i, prefix) {
css[prefix.toLowerCase()+prop]=value || '';
});
return css;
}
function generateFilter(deg) {
var rot, cos, sin, matrix;
if (supports.transform) {
return '';
}
rot=deg>=0 ? Math.PI*deg/180 : Math.PI*(360+deg)/180;
cos=Math.cos(rot);
sin=Math.sin(rot);
matrix='M11='+cos+',M12='+(-sin)+',M21='+sin+',M22='+cos+',SizingMethod="auto expand"';
return 'progid:DXImageTransform.Microsoft.Matrix('+matrix+')';
}
supports.transform=supports('Transform');
supports.transition=supports('Transition');
opts.endDeg*=opts.count;
opts.duration*=opts.count;
if (supports.transition && !opts.forceJS) { // CSS-Transition
if ((/Firefox/).test(navigator.userAgent)) {
wait4css=(!options||!options.animate)&&(opts.startDeg===false||opts.startDeg>=0)?0:25;
}
$this.queue(function(next) {
if (opts.startDeg!==false) {
$this.css(prefixed('transform', 'rotate('+opts.startDeg+'deg)'));
}
setTimeout(function() {
$this
.css(prefixed('transition', 'all '+opts.duration+'s '+opts.easing))
.css(prefixed('transform', 'rotate('+opts.endDeg+'deg)'))
.css(opts.animate);
}, wait4css);
setTimeout(function() {
$this.css(prefixed('transition'));
if (!opts.persist) {
$this.css(prefixed('transform'));
}
next();
}, (opts.duration*1000)-wait4css);
});
} else { // JavaScript-Animation + filter
if (opts.startDeg===false) {
opts.startDeg=$this.data('rotated') || 0;
}
opts.animate.perc=100;
$this.animate(opts.animate, {
duration: opts.duration*10000,
easing: $.easing[opts.easing] ? opts.easing : '',
step: function(perc, fx) {
var deg;
if (fx.prop==='perc') {
deg=opts.startDeg+(opts.endDeg-opts.startDeg)*perc/100;
$this
.css(prefixed('transform', 'rotate('+deg+'deg)'))
.css('filter', generateFilter(deg));
}
},
complete: function() {
if (opts.persist) {
while (opts.endDeg>=360) {
opts.endDeg-=360;
}
} else {
opts.endDeg=0;
$this.css(prefixed('transform'));
}
$this.css('perc', 0).data('rotated', opts.endDeg);
}
});
}
return $this;
};body {
padding: 30px;
background: white;
}
.hex-ring1{
width: 120px;
height: 120px;
-webkit-transform: rotate(7deg);
position: absolute;
top: 10px;
left: 10px;
}
.hex-ring2{
width: 130px;
height: 130px;
-webkit-transform: rotate(45deg);
position: absolute;
top: 5px;
left: 5px;
}
.hex-ring3{
width:140px;
height:140px;
-webkit-transform: rotate(90deg);
position: absolute;
}
.box {
width: 140px;
height: 200px;
cursor: pointer;
width: 140px;
height: 200px;
position:relative;
margin-right:40px;
float:left;
border:thin solid red;
}
.image2 {
position: absolute;
width: 70px;
height: 70px;
left: 33px;
top: 33px;
}
.grey {
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<div class="box grey">
<img class="image " src="http://blackflow.pl/1.png" alt="" width="120" height="120">
<img class="image2" src="http://blackflow.pl/2.png" alt="" width="120" height="120">
</div>
-->
<div class="box grey" id="box1">
<img class="hex-ring1" src="http://blackflow.pl/6.svg" id="hex1" width='120' height="120">
<img class="hex-ring2" src="http://blackflow.pl/6.svg" id="hex2" width='120' height="120">
<img class="hex-ring3" src="http://blackflow.pl/6.svg" id="hex3" width='120' height="120">
<img class="image2" src="http://blackflow.pl/2.png" alt="" width="120" height="120">
</div>
<div class="box grey" id="box2">
<img class="hex-ring1" src="http://blackflow.pl/6.svg" id="hex4" width='120' height="120">
<img class="hex-ring2" src="http://blackflow.pl/6.svg" id="hex5" width='120' height="120">
<img class="hex-ring3" src="http://blackflow.pl/6.svg" id="hex6" width='120' height="120">
<img class="image2" src="http://blackflow.pl/2.png" alt="" width="120" height="120">
</div>
<!-- <p class="txt">
Donec viverra, arcu rutrum mollis placerat, odio quam malesuada lacus, nec molestie leo magna quis tortor. Vestibulum velit quam, suscipit a scelerisque id, lobortis et magna. Maecenas convallis lacus ut tellus scelerisque cursus. Maecenas nisl nisi, accumsan quis diam in, molestie pellentesque enim. Sed orci tortor, efficitur eget metus id, tincidunt porta ante. Curabitur ac augue nulla. Maecenas sit amet augue aliquet, iaculis nisl a, hendrerit ipsum. Duis vehicula orci sed nunc blandit, vel accumsan magna commodo.
Nullam sed felis non felis condimentum tempor in eu ipsum. Vestibulum nec pharetra purus, quis faucibus lectus. Proin finibus blandit mi sit amet fermentum. Vivamus convallis erat quis nulla egestas commodo. Fusce fermentum arcu lacus, non varius odio vulputate vitae. Morbi aliquam accumsan velit, et pulvinar quam aliquam ac. Sed commodo non magna a sodales. In accumsan, felis ac fringilla facilisis, magna ligula dapibus dolor, vitae facilisis erat lectus sed quam. Maecenas vehicula faucibus pellentesque.
</p> -->
</div>