Question

我有一个矩形，2个函数可以在不同的窗口宽度下为不同的矩形设置动画，并通过单击调用函数。它必须在屏幕调整大小时起作用。

问题：

1-似乎当我加载一个函数然后另一个不能工作时，只有第一个。

2-第一次点击不起作用。

3-我必须为文档准备好以及文档调整大小时编写相同的代码。

我如何解决这3点问题。谢谢。代码如下。

$(document).ready(function () {

    function lateralMove() {
        $(".rectangle-1").off("click").click(function () {
            $(this).animate({
                left: "+=50"
            }, 500);
        })
    }

    function horizontalMove() {
        $(".rectangle-1").off("click").click(function () {
            $(this).animate({
                top: "+=50"
            }, 500);
        })
    }

    $(window).resize(function () {
        screenWidth = $(this).width()
    })

    $(".rectangle-1").click(function () {
        if (screenWidth > 300) {
            lateralMove()
        } else if (screenWidth <= 300) {
            horizontalMove()
        }
    })

    screenWidth = $(window).width()
    if (screenWidth > 300) {
        blackMove()
    } else if (screenWidth <= 300) {
        horizontalMove()
    }

})

.rectangle-1 {
    position: relative;
    background-color: #000;
    height: 100px;
    width: 100px;		
    margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>    
    <head></head>
    <body>
        <div>
            <div class="rectangle-1"></div>
        </div>
    </body>
</html>

Answer 1

根据屏幕宽度调用不同的函数：

function do_mobile(){
 //do
}
function do_desktop(){
 //do
}
$(".rectangle-1").on("click", function(){  
     if( $(window).width() > 300 ){
         do_desktop();
     }
     else{
         do_mobile();
     }
})

Answer 2

这只是清理代码的问题（你有一个函数调用了一个名为blackMove（）的函数，它是未定义的）你还需要在函数中调用代码的“assign movement”部分并调用它在文件准备好和窗口调整大小。

这是代码笔： http://codepen.io/nhmaggiej/full/azXgqw/

$(document).ready(function () {

function verticalMove() {

    $(".rectangle-1").off("click").click(function () {

        $(this).animate({
            left: "+=50"
        }, 500);
    })
}

function horizontalMove() {

    $(".rectangle-1").off("click").click(function () {

        $(this).animate({
            top: "+=50"
        }, 500);
    })
}




function assignMovement() {
    screenWidth = $(this).width()
    if (screenWidth > 600) {

        verticalMove()
    } else if (screenWidth <= 600) {

        horizontalMove()
    }

};

$(window).resize(function () {
    assignMovement();
})

assignMovement();

}）;

Answer 3

这将移动方形onload，onresize以及单击方框时。

jsFiddle

function lateralMove(elementX) {
    elementX.animate({
        left: "+=50"
    }, 500);
}

function horizontalMove(elementX) {
    elementX.animate({
        top: "+=50"
    }, 500);
}

function elementMove() {
    screenWidth = $(window).width();
    elementX = $(".rectangle-1");

    if (screenWidth > 300) {
        lateralMove(elementX);
    } else if (screenWidth <= 300) {
        horizontalMove(elementX);
    }
}

//move on resize
//Use a Timeout to ensure that the resize event is only fired once per change.
$(window).resize(function () {
    clearTimeout(this.id);
    this.id = setTimeout(elementMove, 500);
});

//move on click
$(".rectangle-1").click(function () {
    elementMove();
})

//move on load
elementMove();

调用函数并单击动画

3 个答案: