Question

I am using jQuery’s transfer() to move images to a center picture frame when the user hovers their mouse on the image. Here’s what’s supposed to happen:

1. User hovers their mouse on a thumbnail.
2. Thumbnail transfers to a picture frame in center of page.
3. Thumbnail disappears.
4. User hovers on a second thumbnail.
5. This thumbnail replaces other picture in the center frame, AND the first thumbnail reappears.
6. User hovers on first thumbnail again.
7. repeat steps 2-3.

All of steps 1-5 work in my code, which you can see in this jsFiddle. Step 6-7 are not working. It’s as if the transfer code is being removed from the image by steps 2 & 3.

Answer 1

It is happening because you are using one method to bind the event. I have fixed it take a look at this fiddle here

Code

var imgPath = new Object;
imgPath["gen"] = "http://techfeed.net/dyany.com/images/genealogyLarge.png";
imgPath["bo"] = "http://techfeed.net/dyany.com/images/BabyBoSayingOLarge.png";
var lastImage = "";
var transferInProgress = false;
$(function() {

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

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

    function afterTransfer(imgID) {
        setTimeout(function() {
            $("#picFrame").html('<img src="'+imgPath[imgID]+'">');
            $("#"+imgID).hide();
            if ((lastImage != "") && (lastImage != imgID)) {
                $("#"+lastImage).show();
            }
            lastImage = imgID;
            transferInProgress = false;
        }, 1000);
    };

    $("#gen, #bo").mouseover(function(){runTransfer(this.id); return false; });
});