Jquery animate image's background-position for both IE7 and Firefox in one html page

Ask Question Forum:

Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page

Show

ASK RECENT

Jquery animate image's background-position for both IE7 and Firefox in one html page

Asked by duncanb7

at 2024-12-27 09:06:08

Point: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

//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:

Select All Code

Attachment:animate.htmlskybuild.jpg

Author: duncanb7 replied at 2024-12-27 13:09:09

Thanks for your reply Totally correct

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

}

新聞財經娛樂♬資訊 News Economy

About Us|Service|Pricing

Stock Index全球即時指數期貨:

&nbps;

News即時新聞:↓

News即時新聞:↑

On Balance Volume (OBV):

Youtube Video♬ Sharing by members:↓

Youtube Video♬ Sharing by members:↑

Ask Question Forum:

Jquery animate image's background-position for both IE7 and Firefox in one html page

Your Information

Members/Profolio