Я хочу навести указатель мыши на изображение (музыкальный альбом), а затем вывести запись, поэтому я хочу, чтобы она переместилась вправо и немного повернулась, а когда он за кадром, мне нравится возвращаться в нормальное состояние также с анимацией. Он уже может двигаться вправо, но я не могу заставить его вращаться вместе с ним. Мне нравится делать это как можно более простым, поскольку я не профессионал в кодировании. Я использую JavaScript для части движения, как показано ниже,

$(document).ready(function (){
     $("#cover1").hover( function() {
         $("#coverrecord1").stop().animate({ left: '5%' }); 
         }, function() { 
         $("#coverrecord1").stop().animate({ left: '0' }); 
      } ); 
})
0
kevinS 8 Дек 2016 в 15:32

4 ответа

Лучший ответ

Можете ли вы проверить это 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");
  });
 });
1
Sunil Kumar 8 Дек 2016 в 13:09

Попробуйте с тегом ниже

<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);
}
0
Darshak 8 Дек 2016 в 13:14

Вместо того, чтобы делать анимацию с помощью 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>
0
SvenL 8 Дек 2016 в 13:12

Итак, вы ищете свойство CSS3 transform.

НО - он не работает с обычной анимацией jQuery.

Итак, у вас есть несколько вариантов:

  1. написать свою собственную функцию с step (хороший пример: Поворот преобразования анимированных элементов)

  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

0
Community 23 Май 2017 в 12:00