Question

我的页面显示图像。当用户将鼠标悬停在图像上时，我想将该图像传输到中心图像帧。这是一个演示：http://techfeed.net/dyany.com/

正如您所看到的，我的代码不断反复将图像传输到相框。我只希望这次转移发生一次。我用google搜索并发现提到使用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;
       });

  });

jquery悬停无限循环

3 个答案: