0

私は次のことを達成しようとしています。

セットアップ：
オーバーフローが非表示に設定されている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);
        });
    });

誰かがここで私を助けることができますか？私はこれを本当に複雑にしすぎているように感じます。

4

1 に答える 1

0

最初からやり直して、それぞれが正しいオブジェクトを参照する複数の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)});

そこから仕事に行くだけで、うまくいくはずです。

于 2012-08-24T15:24:27.007 に答える