悬停事件的jQuery图像立方体

Question

我正在使用以下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，似乎没有什么突出的。

Answer 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');
    });

});

工作演示：

Answer 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/