调用函数和单击动画
[英]calling functions and click animations
问题描述
I have one rectangle, 2 functions that animates different this rectangle at different window widths, and im calling the functions with a click. 
我有一个矩形，2个函数，它们以不同的窗口宽度为该矩形设置动画，并通过单击即时调用这些函数。 it Must work when screen resizes as well. 屏幕调整大小时，它也必须工作。
Problems: 问题：
1- it seems like when I load one function then the other cant work, only the first. 1-似乎当我加载一个函数然后另一个不能工作，只有第一个。
2- It doesn't work on the first click. 2-第一次点击不起作用。
3- I have to write the same code for when the document is ready and when the document resize. 3-我必须为准备好文档和调整文档大小写相同的代码。
How can I fix this 3 points. 我该如何解决这3点。 thx. 谢谢。 code below. 下面的代码。
$(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>
3 个解决方案
解决方案1
1 2015-03-26 15:42:34
just cal a different function depending na screen width: 只是根据屏幕宽度校准不同的功能：
function do_mobile(){
//do
}
function do_desktop(){
//do
}
$(".rectangle-1").on("click", function(){
if( $(window).width() > 300 ){
do_desktop();
}
else{
do_mobile();
}
})
解决方案2
0 已采纳 2015-03-26 15:58:35
This was just a matter of cleaning up your code (you had a function call to a function called blackMove() that was undefined) and you also needed to wrap the "assign movement" portion of your code in a function and call it on document ready and on window resize. 这只是清理代码的问题（您有一个未定义的名为blackMove（）的函数调用），还需要将代码的“分配运动”部分包装在函数中并在文档上调用准备好并在窗口上调整大小。
Here's the code pen: http://codepen.io/nhmaggiej/full/azXgqw/ 这是代码笔： 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();
}); }）;
解决方案3
0 2015-03-26 16:21:39
This will move the square onload, onresize and when the square is clicked. 这将移动正方形的onload，onresize以及单击正方形时。
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();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.