jquery悬停无限循环

Question

我的页面显示了一个图像。当用户将鼠标悬停在图像上时，我希望将该图像转移到中心相框。这是一个演示：http://techfeed.net/dyany.com/

如您所见，我的代码一次又一次地将图像传输到相框。我只想让这个传输发生一次。我在谷歌上搜索了一下，发现有人提到使用stop()函数，但这似乎对我不起作用(而且它似乎有不同的用途)。

CSS如下所示：

.genealogy {
    position: absolute;
    top: 100px;
    left: 100px;
}
.ui-effects-transfer {
    width: 300px;
    height: 300px;
    border: 1px dashed purple;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
}
.pictureFrame {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 250px;
    left: 400px;
}

和HTML：

<div class="demo">
    <img src="images/genealogy.png" id="imageSmall" class="genealogy" onClick="displayImage()" />
    <div class="pictureFrame" id="picFrame"></div>
</div>

最后是JavaScript：

function runTransfer() {
    var options = {};
    options = {
        to: "#picFrame",
        className: "ui-effects-transfer"
    };

    // run the effect
    $("#imageSmall").effect("transfer", options, 1000, afterTransfer);
};

function afterTransfer() {
    setTimeout(function() {
        $("#picFrame").append('<img src="images/genealogyLarge.png">');
        $("#imageSmall").hide();
    }, 0);
};

// set effect from select menu value
$("#imageSmall").hover(function() {
    runTransfer();
    return false;
});

Answer 1

您的问题是您的hover回调被多次调用。首先，当鼠标移到小图像上时，它会被调用，然后在缩略图上创建一个元素(即在鼠标和缩略图之间)。然后那个元素移动，你会得到另一个悬停。冲洗并重复，直到第一个动画完成并使缩略图消失。

切换到one应该会解决您的问题：

$('#imageSmall').one('mouseover', function() {
    runTransfer();
});

例如：http://jsfiddle.net/ambiguous/tsKnz/

如果你想做的就是调用runTransfer ( runTransfer不接受任何参数)，你可以这样做：

$('#imageSmall').one('mouseover', runTransfer);

此版本的一个示例：http://jsfiddle.net/ambiguous/tsKnz/1/

Answer 2

使用javascript :不超过60行

var moved = false; 
document.querySelector('ur pic').addEventListener('mouseover',function(){
if(!moved){
     moved = true; //Do the rest to move it 
}},false);

Answer 3

试试这段代码

    $(function() {
        function runTransfer() {
            var options = {};
        options = { to: "#picFrame", className: "ui-effects-transfer" };
                    // run the effect

          $( "#imageSmall" ).effect( "transfer", options, 1000, afterTransfer );
        };

        function afterTransfer() {

          setTimeout(function() {

            $("#picFrame").append('<img src="images/genealogyLarge.png">');

            $( "#imageSmall" ).hide();

          }, 0 );

        };

        // set effect from select menu value

       $("#imageSmall").hover(function() {
          $("#imageSmall").unbind("hover");
          runTransfer();
          return false;
       });

  });