悬停事件上的jQuery图像立方体答案

【问题标题】：jQuery image cube on hover event悬停事件上的jQuery图像立方体
【发布时间】：2013-07-24 10:21:49
【问题描述】：

我正在使用以下 jQuery 插件：http://keith-wood.name/imageCube.html

我正在设置一个基于网格的自定义设计，这是我的 js：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagecube.js"></script>
<script type="text/javascript">

$(function () {
    $('#basicCube1').imagecube({pause:100, direction:'left', repeat:false});
});

$(document).ready(function() {

$("#basicCube1").hover(
  function () {
    $('#basicCube1').imagecube('start');

  },
  function () {
    $('#basicCube1').imagecube('stop');
  }
);

});
</script>

这是我的 CSS：

#container{width:450px;}
#basicCube1 { width: 150px; height: 150px; float:left; }

这是我的html：

<div id="container">
<div id="basicCube1">
<img src="http://keith-wood.name/img/uluru.jpg" alt="Uluru" title="Uluru">
<img src="http://keith-wood.name/img/islands.jpg" alt="Islands" title="Islands">
</div>
</div>

我还设置了一个小提琴：http://jsfiddle.net/d9gN5/1/

我在#basicCube1 上设置了一个悬停事件，效果很好。我遇到的问题是，当您将鼠标悬停在元素上时，它会一直旋转。一旦悬停，我希望旋转停止，直到元素不再悬停。

这个插件可以实现吗？我已经阅读了这里的文档：http://keith-wood.name/imageCubeRef.html，似乎没有什么特别突出的。

【问题讨论】：

您可以在 .hover 函数中使用无限长的 setInterval 作为解决方法。当 setInterval 不再悬停时，您只需要停止它。此外，jsfiddle 似乎对我不起作用

标签： jquery image hover

【解决方案1】：

这是不是因为图片的旋转/变化触发了元素本身的悬停事件。

为了解决这个问题，我使用了mouseenter 和mouseleave 事件，以及一个全局范围的变量 (entered) 作为信号量来了解元素是否已经输入：

$(function () {
    $('#basicCube1').imagecube({
        pause: 100,
        direction: 'left',
        repeat: false
    });
    $('#basicCube2').imagecube();
    $('#basicCube3').imagecube();
    $('#basicCube4').imagecube();
    $('#basicCube5').imagecube();
    $('#basicCube6').imagecube();
    $('#basicCube7').imagecube();
    $('#basicCube8').imagecube();
    $('#basicCube9').imagecube();
});

var entered = false;

$(document).ready(function () {

    $("#basicCube1").mouseenter(function () {
        if (entered) {
            $('#basicCube1').imagecube('stop');
            return
        }
        $('#basicCube1').imagecube('start');
        entered = true;
    });

    $("#basicCube1").mouseleave(function () {
        entered = false;
        $('#basicCube1').imagecube('stop');
    });

});

工作演示：

【讨论】：

【解决方案2】：

我是这样解决的，我必须使用“afterRotate”功能：

$('#basicCube1').imagecube({pause:1000, direction:'left', repeat:false, afterRotate: endedRotate1, segments:100}); 
$('#basicCube2').imagecube({pause:1000, direction:'left', repeat:false, afterRotate: endedRotate2}); 
$('#basicCube3').imagecube({pause:1000, direction:'left', repeat:false, afterRotate: endedRotate3}); 
$('#basicCube4').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate4}); 
$('#basicCube5').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate5}); 
$('#basicCube6').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate6}); 
$('#basicCube7').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate7}); 
$('#basicCube8').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate8}); 
$('#basicCube9').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate9});

一个更新的小提琴以显示它的工作：http://jsfiddle.net/d9gN5/4/

【讨论】：