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

【问题标题】：make a (image) move to the right and rotate 45 degrees while hovering over another (image)使（图像）向右移动并旋转 45 度，同时将鼠标悬停在另一个（图像）上
【发布时间】：2017-04-23 16:55:51
【问题描述】：

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

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

【问题讨论】：

您可以在这里找到解决方案：stackoverflow.com/questions/23695090/…
'我正在使用 javascript 作为移动部分' -> 你能在问题中发布那个“javascript 部分”吗？
如何在将鼠标悬停在另一张图片上时使用它？
$(document).ready(function (){ $("#cover1").hover(function() { $("#coverrecord1").stop().animate({ left: '5%' }); }, function() { $("#coverrecord1").stop().animate({ left: '0' }); } ); });
jsfiddle.net/62RJc/802

标签： javascript jquery html css wordpress

【解决方案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");
  });
 });

【讨论】：

【解决方案2】：

好的，您要查找的是 CSS3 transform 属性。

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

所以你有几个选择：

用step编写你自己的函数（很好的例子：Animate element transform rotate）
在类中使用 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 和大量谷歌搜索结果

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);
}

【讨论】：