Question

My page displays an image. When the user hovers their mouse on the image, I want to transfer that image to a center picture frame. Here is a demo: http://techfeed.net/dyany.com/

As you can see, my code keeps transferring the image to the picture frame over and over. I only want this transfer to happen once. I’ve googled and found mention of using the stop() function, but this doesn’t seem to work for me (and it seems to have a different purpose anyway.)

The CSS looks like this:

.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;
}

And the HTML:

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

And finally, the 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

Your problem is that your hover callback is being called multiple times. First it is called when your mouse goes over the small image, then you create an element above your thumbnail (i.e. between the mouse and your thumbnail). Then that element moves and you get another hover. Rinse and repeat until the first animation finishes and makes the thumbnail go away.

Switching to one should sort you out:

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

For example: http://jsfiddle.net/ambiguous/tsKnz/

If all you want to do is call runTransfer (and runTransfer doesn’t take any arguments), you could just do this:

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

And an example of this version: http://jsfiddle.net/ambiguous/tsKnz/1/