使一个（图像）向右移动并旋转45度，同时将鼠标悬停在另一个（图像）上

Question

我想将鼠标悬停在图像（音乐专辑）上，然后推出记录，因此我希望它向右移动并旋转一点，当它悬停时，我希望它也可以通过动画恢复正常。 它已经可以向右移动，但我无法使其随其旋转。 我喜欢尽可能简化，因为我不是编码专家。 我将javascript用于运动部分，如下所示，

$(document).ready(function (){
     $("#cover1").hover( function() {
         $("#coverrecord1").stop().animate({ left: '5%' }); 
         }, function() { 
         $("#coverrecord1").stop().animate({ left: '0' }); 
      } ); 
})

Answer 1

你能测试这个jsfiddle并让我知道这是你在寻找什么吗

$("#albumContainer>img").hover(function(){
    $("#albumContainer>img").each(function(){
    $(this).addClass("animate");
  });
  $(this).removeClass("animate");
});

$("#albumContainer>img").mouseout(function(){
    $("#albumContainer>img").each(function(){
   $(this).removeClass("animate");
  });
 });

Answer 2

好的，您正在寻找的是CSS3 transform属性。

但是-它不适用于常规jQuery动画。

因此，您有两种选择：

1. 用step编写自己的函数（很好的例子： Animate element transform rotation ）

2. 在类中使用CSS3动画

像这样的东西：

$("#cover1").hover( function() {
     $("#coverrecord1").addClass('rollOut'); 
     }, function() { 
     $("#coverrecord1").removeClass('rollOut'); 
  } ); 

<style>
   #coverrecord1{ transition:all 1s;}
   .rollOut{
      left: 5%;
      -ms-transform: rotate(45deg); /* IE 9 */
      -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
       transform: rotate(45deg);
    }
</style>

有关CSS3动画的更多信息： http : //www.w3schools.com/css/css3_animations.asp和很多Google搜索结果

Answer 3

我建议不要使用JavaScript来制作动画，而应该使用CSS来做。 您可以使用以下代码轻松实现所需的效果。

该示例只是为了让您了解它的外观。 当然，从这一点上来说，您甚至可以微调动画。

的HTML

<div class="album">
  <img class="cover" src="path" alt="" />
  <img class="record" src="path" alt=""  />
</div>

的CSS

.album {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
  cursor: pointer;
}

.cover {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.record {
  position: absolute;
  top: 50%;
  left: 0;
  height: 100%;
  transform: translateY(-50%) rotate(0deg);
  transition: 0.3s;
}

.album:hover .record {
  left: 50%;
  transform: translateY(-50%) rotate(45deg);
}

 .album { position: relative; width: 200px; height: 200px; background: #eee; cursor: pointer; } .cover { position: relative; top: 0; left: 0; width: 100%; z-index: 100; } .record { position: absolute; top: 50%; left: 0; height: 100%; transform: translateY(-50%) rotate(0deg); transition: 0.3s; } .album:hover .record { left: 50%; transform: translateY(-50%) rotate(45deg); } 

 <div class="album"> <img class="cover" src="http://www.fuse.tv/image/56fe73a1e05e186b2000009b/768/512/the-boxer-rebellion-ocean-by-ocean-album-cover-full-size.jpg" alt="" /> <img class="record" src="http://www.clipartkid.com/images/853/vinyl-record-1-1024-768-descibel-radio-1TJlqv-clipart.png" alt="" /> </div> 

Answer 4

尝试以下标签

<img src="http://i.imgur.com/3DWAbmN.jpg" />
<img src="http://i.imgur.com/3DWAbmN.jpg" />

并在css下面添加

img{
    border-radius:50%;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;


}
img:hover{
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}