調用函數和單擊動畫
[英]calling functions and click animations
問題描述
我有一個矩形，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>
3 個解決方案
解決方案1
1 2015-03-26 15:42:34
只是根據屏幕寬度校准不同的功能：
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
這只是清理代碼的問題（您有一個未定義的名為blackMove（）的函數調用），還需要將代碼的“分配運動”部分包裝在函數中並在文檔上調用准備好並在窗口上調整大小。
這是代碼筆： 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
這將移動正方形的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.