将鼠标悬停在图像上时旋转答案

【问题标题】：Image rotation when you hover over it将鼠标悬停在图像上时旋转
【发布时间】：2017-02-15 08:20:21
【问题描述】：

我有以下脚本，用户应该将鼠标悬停在图像上，然后旋转该图像。

$("#alcazar-image").rotate({
  bind:
  {
    mouseover : function() {
    $(this).rotate({animateTo:180})
  },
  mouseout : function() {
    $(this).rotate({animateTo:0})
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryrotate.com/js/jQueryRotateCompressed.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row">
          <div class="media">
            <div class="media-left media-middle">
                <a href="#">
                    <img src="http://www.theo-android.co.uk/github-images/alcazar.png" class="media-object img-thumbnail" id="alcazar-image" alt="alcazar">
                </a>
            </div>
            <div class="media-body">
                <div class="media-heading"><h3>Alcazar Park</h3></div>
                <p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a></p>   
            </div>
              
            </div>  
    </div>

但是，悬停效果不起作用。有什么想法吗？

谢谢，

西奥。

【问题讨论】：

为什么你需要 js。你也可以用 css 做到这一点
我知道，但我想提高我的 jquery 技能。
在我将 jquery 添加到您的 sn-p 后似乎可以工作
是的。它的工作。
@Theo 尝试运行它并告诉我这是否不是你想要的

标签： jquery css twitter-bootstrap-3 hover

【解决方案1】：

您不需要使用 JavaScript 或 jquery 来实现您在此处尝试执行的操作。

一个简单的 css transform: rotate 应该可以为您完成这项工作。

img:hover {
  transform: rotate(720deg);
  -ms-transform: rotate(720deg);
  -webkit-transform: rotate(720deg);
  transition: all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryrotate.com/js/jQueryRotateCompressed.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row">
  <div class="media">
    <div class="media-left media-middle">
      <a href="#">
        <img src="http://www.theo-android.co.uk/github-images/alcazar.png" class="media-object img-thumbnail" id="alcazar-image" alt="alcazar">
      </a>
    </div>
    <div class="media-body">
      <div class="media-heading">
        <h3>Alcazar Park</h3>
      </div>
      <p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a>
      </p>
    </div>

  </div>
</div>

【讨论】：

【解决方案2】：

你可以在 CSS 中做到这一点。

img{
    -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(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}

【讨论】：

【解决方案3】：

一切都很好，除了你忘记在代码 sn-p 中包含 jquery 和 jquery-rotate 插件，尝试使用下面的代码：

$("#alcazar-image").rotate({
  bind: {
    mouseover: function() {
      $(this).rotate({
        animateTo: 180
      })
    },
    mouseout: function() {
      $(this).rotate({
        animateTo: 0
      })
    }
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/wilq32/jqueryrotate/master/jQueryRotate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row">
  <div class="media">
    <div class="media-left media-middle">
      <a href="#">
        <img src="http://www.theo-android.co.uk/github-images/alcazar.png" class="media-object img-thumbnail" id="alcazar-image" alt="alcazar">
      </a>
    </div>
    <div class="media-body">
      <div class="media-heading">
        <h3>Alcazar Park</h3>
      </div>
      <p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a>
      </p>
    </div>

  </div>
</div>

【讨论】：

很高兴听到这个消息。不，你不能在这里接受所有的答案。只需选择真正回答您的问题并解决问题的答案 :) 。稍后其他程序员发现它有用时会参考它

【解决方案4】：

只需用这个 ::

替换你的 jQuery

$("#alcazar-image").mouseover(function() {
    $(this).css('transform', 'rotate(180deg)');
    $(this).css('-ms-transform', 'rotate(180deg)'); /* IE 9 */
    $(this).css('-webkit-transform', 'rotate(180deg)'); /* Chrome, Safari, Opera */
}).mouseout(function() {
    $(this).css('transform', 'rotate(0deg)');
    $(this).css('-ms-transform', 'rotate(0deg)'); /* IE 9 */
    $(this).css('-webkit-transform', 'rotate(0deg)'); /* Chrome, Safari, Opera */
});

它适用于所有浏览器。

【讨论】：

【解决方案5】：

我建议将.hover() 事件与rotate 一起使用：

$("#alcazar-image").hover(function() {
  $(this).toggleClass("rotate-180");
});

JsFiddle demo

【讨论】：