gpt4 book ai didi

javascript - 调用函数和点击动画

转载 作者:行者123 更新时间:2023-12-03 10:29:25 25 4
gpt4 key购买 nike

我有一个矩形,两个函数,它们在不同的窗口宽度下为这个矩形提供不同的动画效果,我只需单击一下即可调用这些函数。当屏幕大小调整时它也必须工作。

问题:

1-似乎当我加载一个函数时,另一个函数无法工作,只有第一个函数无法工作。

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

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>

最佳答案

只需根据屏幕宽度调用不同的函数:

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

关于javascript - 调用函数和点击动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29282385/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com