Jquery 使用淡出设置位置动画

我正在努力做到以下几点

设置：
div中溢出设置为隐藏的图像

想要的效果：
当div悬停在上方时，图像应在div内向上移动。
当图像顶部或底部与div顶部或底部相交时，图像应反转方向。
当鼠标离开div时，图像应该逐渐停止，而不是突然停止

问题：
我找不到一种方法来为页面上的多个元素使用间隔，而产生一个无限循环就是糟糕的编程。 我似乎无法使图像正确反转方向

代码：

$(window).load(function(){
        var posts = $(".post");
        var post_images = $(".post > img");
        var post_details = $(".job_focus");

        var pan_scan = function(e){
            event.stopPropagation();
            var image = $(e.target);
            var image_height = image.height();
            var original_offset;
            var first_run = "true";


            var move_image = function(){
                var fadeout = image.attr("fadeout");
                var direction = image.attr("direction");

                if (fadeout == "false"){
                    console.log("hover animation");
                    var image_offset = parseInt(image.css("top"));
                    var direction = image.attr("direction");

                    if (image_offset - 2 < -(image_height - 160)){
                        image.attr("direction", "+");
                    } else if (image_offset + 2 > -150){
                        image.attr("direction", "-");
                    };

                    image.animate({"top": direction + "=2px"}, 1, "linear");
                } else if (fadeout == "true"){
                    console.log("fadeout animation");
                    if (first_run == "true") {

                        original_offset = image.offset().top;

                        if (direction == "-"){
                            var image_stop = original_offset - 20;
                        } else if (direction == "+") {
                            var image_stop = original_offset + 20;
                        };

                        first_run = "false";
                    };

                    current_offset = image.offset().top;

                    if (direction == "-"){
                        var image_difference = (current_offset - image_stop )/10;
                        console.log(image_stop);
                        console.log(current_offset);
                        console.log(image_difference);
                    } else if (direction == "+") {
                        var image_difference = (image_stop -  current_offset)/10;
                        console.log("test");
                    } else {
                        console.log("direction failed");
                        console.log(image);
                    };

                    if (image_difference > 1){
                        image.animate({"top": direction + "=" + image_difference}, 1, "easeOutExpo");
                    } else {
                        image.stop(true, true);
                        image.attr({"fadeout": false, "animate": false});
                        first_run = "true";
                    };
                }

                var animate = image.attr("animate");
                if (animate == "true") {
                    move_image();
                } else {
                    image.attr("animate", true);
                }
            };

            move_image();
        };

        var un_pan_scan = function(e){
            var image = $(e.target);
            image.attr("fadeout", true);
        };

        post_images.each(function(){
            // Moves images to the center of the div, sets initial values for movement, and sets the mouseenter and mouseleave handlers
            $(this).css({'top': -($(this).height()/2)}).attr({"direction": "-", "fadeout": "false", "animate": "true"}).hover(pan_scan, un_pan_scan);
        });
    });

$（窗口）.load（函数（）{
var posts=$（“.post”）；
var post_images=$（“.post>img”）；
var post_details=$（“.job_focus”）；
var pan_scan=功能（e）{
event.stopPropagation（）；
var图像=$（e.target）；
var image_height=image.height（）；
var原始偏移量；
var first_run=“true”；
var move_image=函数（）{
var fadeout=image.attr（“fadeout”）；
var方向=image.attr（“方向”）；
如果（淡出=“假”）{
log（“悬停动画”）；
var image_offset=parseInt（image.css（“top”）；
var方向=image.attr（“方向”）；
如果（图像偏移-2<-（图像高度-160））{
image.attr（“方向”、“+”）；
}否则如果（图像偏移+2>-150）{
image.attr（“方向”、“-”）；
};
动画（{“顶部”：方向+“=2px”}，1，“线性”）；
}else if（淡出=“真”）{
log（“淡出动画”）；
如果（第一次运行==“真”）{
原始偏移=image.offset（）.top；
如果（方向=“-”）{
var image_stop=原始_偏移量-20；
}否则如果（方向=“+”）{
var image_stop=原始_偏移量+20；
};
first_run=“false”；
};
当前偏移量=image.offset（）.top；
如果（方向=“-”）{
var image_差=（当前_偏移-image_停止）/10；
控制台日志（图像停止）；
console.log（当前_偏移量）；
控制台日志（图像_差异）；
}否则如果（方向=“+”）{
var image\u差=（image\u stop-current\u offset）/10；
控制台日志（“测试”）；
}否则{
console.log（“方向失败”）；
console.log（图像）；
};
如果（图像差异>1）{
动画（{“top”：direction+“=”+image_difference}，1，“easeOutExpo”）；
}否则{
image.stop（true，true）；
attr（{“淡出”：false，“动画”：false}）；
first_run=“true”；
};
}
var animate=image.attr（“animate”）；
如果（动画==“真”）{
移动图像（）；
}否则{
attr（“动画”，true）；
}
};
移动图像（）；
};
var un_pan_scan=函数（e）{
var图像=$（e.target）；
attr（“淡出”，真）；
};
post_图像。每个（函数（）{
//将图像移动到div的中心，设置移动的初始值，并设置mouseenter和mouseleave处理程序
$（this.css（{'top'：-（$（this.height（）/2）}）.attr（{“direction”：“-”，“fadeout”：“false”，“animate”：“true”}）.hover（平移扫描，取消平移扫描）；
});
});

---

有人能帮我吗？我觉得我真的太复杂了。

决定重新开始，想出一种方法，让多个设置间隔都引用正确的对象

这就是我想到的：

var intervals = {};

function object_hover(e){
var num = $(e.target).attr("num");

intervals[num] = window.setInterval(function(){do_stuff_here()}, 1000);
};

function object_blur(e){
var num = $(e.target).attr("post_num");

clearInterval(intervals[post_num]);
};

objects.each(function(){$(this.hover(post_hover, post_blur)});

从那里开始工作，结果应该很好