Ask Question Forum:
Model Library:2025-02-08:A.I. model is online auto reply
C
O
M
P
U
T
E
R
2
8
Show
#
ASK
RECENT
←
- Underline
- Bold
- Italic
- Indent
- Step
- Bullet
- Quote
- Cut
- Copy
- Paste
- Table
- Spelling
- Find & Replace
- Undo
- Redo
- Link
- Attach
- Clear
- Code
Below area will not be traslated by Google,you can input code or other languages
Hint:If find spelling error, You need to correct it,1 by 1 or ignore it (code area won't be checked).
X-position of the mouse cursor
Y-position of the mouse cursor
Y-position of the mouse cursor
Testcursor
caretPos
Attachment:===
Asked by duncanb7
at 2024-12-27 09:06:08
ModifyPoint:500 Replies:4 POST_ID:828546USER_ID:11059
Topic:
JavaScript;;
I have two questions about Jquery animate function. I would like to move
my background image from -800x to 0px in x-direction within 5 seconds and then
css back to 0px 0px in x-y axis and then move it
from 0 to 460px in y-direction also within 5 seconds for both Firefox and IE7.
Question-1, How can I make it work in y-direction in Firefox? I tried backgroundPositionY in .animate ?
but it faild.
Question-2 Animate "backgroundPosition":"0px" in IE7 that the result is totally different from Firefox.
Actully I can use background-position-x and background-position-y for my expectation for IE7 but
how can I combine it into one for both Firefox and IE7 at the same time or within using same javascript code page ?
I tried to modify the following init() function code from original one, but it failed to meet my expectation.
function init(){
$('#block').animate({"backgroundPosition":"0px","background-position-x":"0px"},{duration:5000,complete:function(){
$('#block').css("background-position","0px 0px");
//$('#block').animate({"backgroundPositionY":"460px"},{duration:5000,complete:function(){}});
}});
}
Please advise
Duncan
my background image from -800x to 0px in x-direction within 5 seconds and then
css back to 0px 0px in x-y axis and then move it
from 0 to 460px in y-direction also within 5 seconds for both Firefox and IE7.
Question-1, How can I make it work in y-direction in Firefox? I tried backgroundPositionY in .animate ?
but it faild.
Question-2 Animate "backgroundPosition":"0px" in IE7 that the result is totally different from Firefox.
Actully I can use background-position-x and background-position-y for my expectation for IE7 but
how can I combine it into one for both Firefox and IE7 at the same time or within using same javascript code page ?
I tried to modify the following init() function code from original one, but it failed to meet my expectation.
function init(){
$('#block').animate({"backgroundPosition":"0px","background-position-x":"0px"},{duration:5000,complete:function(){
$('#block').css("background-position","0px 0px");
//$('#block').animate({"backgroundPositionY":"460px"},{duration:5000,complete:function(){}});
}});
}
Please advise
Duncan
//Orignal animate.html<!DOCTYPE html><html><head><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script><style> body{margin:0px;border:0px;padding:0px;width:1011px;height:1000px;background-color:white;}#block {margin:0px;border:0px;padding:0px;position:absolute;opacity:1;filter:alpha(opacity=100);width:800px;height:460px;background:black url(/image/skybuild.jpg) no-repeat;background-position:-800px 0px;}</style><script>function init(){$('#block').animate({"backgroundPosition":"0px"},{duration:5000,complete:function(){$('#block').css("background-position","0px 0px");//$('#block').animate({"backgroundPositionY":"460px"},{duration:5000,complete:function(){}});}});}</script></head> <body onload="init();"> <div id="block"></div> </body> </html> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:
Attachment:animate.htmlskybuild.jpg
Author: duncanb7 replied at 2024-12-27 13:09:09
Thanks for your reply Totally correct
Duncan
Duncan
Assisted Solution
Expert: Tom Beck replied at 2024-12-27 10:47:24
250 points EXCELLENT
"background-position" is the position of the background image within the element, but since your element is a div, you can just fill the div with the background image and move the whole div using top and left. Also, you will have less browser compatibility issues with top and left then you will with background-position. It's also easier to use top and left with jquery. "background-position" is best used when you want to move the background image of a web page to a position other than 0% and 0% (the default).
Author: duncanb7 replied at 2024-12-27 10:22:01
if so, why it exist background-position in CSS?
Accepted Solution
Expert: Tom Beck replied at 2024-12-27 10:09:05
250 points EXCELLENT
Why not just use top and left on load?
Here's the jquery:
<script type="text/javascript">
$(window).load(function(){
$("#block").animate({left:'0'},{queue:false, duration:5000, complete:function(){
$("#block").animate({top:'460px'},{queue:false, duration:5000});
}
});
});
</script>
And the css:
#block {
border:0px;
padding:0px;
position:absolute;
opacity:1;
filter:alpha(opacity=100);
width:800px;
height:460px;
background:url(/image/skybuild.jpg) no-repeat;
left:-800px;
top:0
}
Here's the jquery:
<script type="text/javascript">
$(window).load(function(){
$("#block").animate({left:'0'},{queue:false, duration:5000, complete:function(){
$("#block").animate({top:'460px'},{queue:false, duration:5000});
}
});
});
</script>
And the css:
#block {
border:0px;
padding:0px;
position:absolute;
opacity:1;
filter:alpha(opacity=100);
width:800px;
height:460px;
background:url(/image/skybuild.jpg) no-repeat;
left:-800px;
top:0
}
