0

Задача заключается в том, чтобы при наведении курсора мыши картинка смещалась на заданное количество px, но никак не хочет срабатывать! Прошу помощи, кто с таким сталкивался?

  jQuery(document).ready(function() {
    $(".logo").mouseover(function(event) {
    $(".logo").css(
      {"background-position":"0px 0px",
      "transition-duration":"5s",
      "animation":"animatedBackground"
    });
    }
  )

  })
@keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 500px 0px; }
}

@-webkit-keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 500px 0px; }
}

.logo {
  width: 600px;
  height: 300px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT64cprQO-leFSi_6p8BcHqzU1vJnh4afu6dcegcdnG5JCw4mo7");
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="logo"></div>

https://jsfiddle.net/usegsxL8/4/

2 ответа 2

2

@keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 500px 0px; }
}

@-webkit-keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 500px 0px; }
}

.logo {
  width: 600px;
  height: 300px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT64cprQO-leFSi_6p8BcHqzU1vJnh4afu6dcegcdnG5JCw4mo7");
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.logo:hover{
  background-position:0px 0px;
  transition-duration:5s;
  animation-name:animatedBackground;
  animation-duration:2s;
  animation-iteration-count:infinite;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>animashka</title>
</head>
<body>
<div class="logo"></div>
</body>
</html>

0

https://www.w3schools.com/css/css3_animations.asp

@keyframes animatedBackground {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 500px 0px;
  }
}

@-webkit-keyframes animatedBackground {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 500px 0px;
  }
}

.logo {
  width: 600px;
  height: 300px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT64cprQO-leFSi_6p8BcHqzU1vJnh4afu6dcegcdnG5JCw4mo7");
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

.logo:hover {
  animation-name: animatedBackground;
  animation-duration: 4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="logo"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.