I want to make a background image scroll to the left by using the animate marginRight property which is activated by clicking a link, but its not working. The weird thing is that when I use marginLeft it works, its just backwards. Here is my test site, and here is my non working jQuery code: (Again im trying to get the background image to scroll to the left) Also please let me know if I can post anything else to make this easier on you.

<script type="text/javascript">
jQuery(document).ready(
function(){
    jQuery('#homelink').click(
        function(){
            jQuery('#SiteBackground').animate({
                marginRight : "1000px"
            },10000);
        });
});
</script>

and my html: (#SiteBackground is what I want to move to the left, and #homelink is the activator)

<img id="SiteBackground" src="/jscottsavage/media/Main/Backdrop.jpg" style="position: absolute; left: 0px; top: 0px; z-index: -1; height: 384px;">

<div id="homelink">Home</div>

I want to make a background image scroll to the left by using the animate marginRight property which is activated by clicking a link, but its not working. The weird thing is that when I use marginLeft it works, its just backwards. Here is my test site, and here is my non working jQuery code: (Again im trying to get the background image to scroll to the left) Also please let me know if I can post anything else to make this easier on you.

<script type="text/javascript">
jQuery(document).ready(
function(){
    jQuery('#homelink').click(
        function(){
            jQuery('#SiteBackground').animate({
                marginRight : "1000px"
            },10000);
        });
});
</script>

and my html: (#SiteBackground is what I want to move to the left, and #homelink is the activator)

<img id="SiteBackground" src="/jscottsavage/media/Main/Backdrop.jpg" style="position: absolute; left: 0px; top: 0px; z-index: -1; height: 384px;">

<div id="homelink">Home</div>

• javascript
• jquery
• html
• css

1 Answer 1

I figured out a way to do this. I'm not sure if its the right/proper way but it works in Firefox, Chrome, and IE 7+ so I'm going to use it until I find a better way to do it. Basically all you do is change the 'marginRight' to a 'marginLeft', and add a - sign in front of the number, as seen below.

<script type="text/javascript">
jQuery(document).ready(
     function(){
        jQuery('#homelink').click(
    function(){
        jQuery('#SiteBackground').animate({
            marginLeft : "-1000px"
        },10000);
    });
});
</script>