社区响应

Question

当你将鼠标悬停在它上面时，我试图让你的照片震动。这是我到目前为止所尝试的：

代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>

</style>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>

<p>Hover above the picture</p>
<img src="pfeil.png" id="toggle">

<script>
 $( document ).hover(function() {
 $( "#toggle" ).effect( "shake" );
 });
 </script>
 </body>
 </html>

Answer 1

你可以用CSS实现这个目的：

@keyframes thumb {
  0% { transform: translateX(5px); }
  50% { transform: translateX(-5px); }
  100% { transform: translateX(5px); }
}

img#toggle:hover
{
  animation-name: thumb;
  animation-duration: 200ms;
  transform-origin:50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

Answer 2

要使用jQuery UI将图片悬停在图片上时，需要选择图像元素的ID，而不是整个文档：

 $('#toggle').hover(function() {
    $("#toggle").effect("shake");
 });

Answer 3

社区响应

这是一个可能的解决方案：

$(document).ready(function () {
  $(document).hover(function () {
    $("#toggle").effect("shake");
  });
});

您的原始代码对我有用，但是我在使用jQuery时遇到的情况，您应该像我上面那样包装您的jQuery onready。

Answer 4

将处理程序绑定到正文而不是窗口，看看是否有效。

$( "body" ).hover(function() {
 $( "#toggle" ).effect( "shake" );
 });

Answer 5

像mcgraphic所说：除非这是作业，否则你可以使用css

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

为什么不动摇？

5 个答案:

社区响应