Question

我正在努力完成以下任务。

设置：
溢出设置为隐藏的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);
        });
    });

有人可以帮我吗？我觉得我真的过于复杂了。

Answer 1

决定重新开始并提出一种方法，让每个引用正确对象的多个setIntervals。

这就是我提出的：

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

从那里开始工作，应该没问题。

使用淡出的动画位置

1 个答案: