calling functions and click animations
Question
I have one rectangle, 2 functions that animates different this rectangle at different window widths, and im calling the functions with a click. 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.
2- It doesn't work on the first click.
3- I have to write the same code for when the document is ready and when the document resize.
How can I fix this 3 points. 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 answers
solution1
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();
}
})
solution2
0 ACCPTED 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.
Here's the code pen: 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();
});
solution3
0 2015-03-26 16:21:39
This will move the square onload, onresize and when the square is clicked.
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.