Animation and images

Animation and images

  1. <!-- html code -->
  2. <div style="text-align:center; border: solid 1px Orange;">
          <div style="margin: 0 auto; border: solid 1px Green;">
                <img id="mainImg1" style="position: relative; left: 0px; width: 355px; height: 200px; border: solid 1px Red; display: inline; vertical-align: bottom;" src="Images/Landscape1.jpg" title="Featured Image in Gallery" alt="Featured Image in Gallery" />
                <img id="mainImg2" style="position: relative; left: 0px; width: 355px; height: 200px; border: solid 1px Red; display: inline; vertical-align: bottom;" src="Images/Landscape2.jpg" title="Next Image in Gallery" alt="Next Image in Gallery" />
                <img id="mainImg3" style="position: relative; left: 0px; width: 355px; height: 200px; border: solid 1px Red; display: none; vertical-align: bottom;" src="Images/Landscape3.jpg" title="Hidden Image in Gallery" alt="Hidden Image in Gallery" />
          </div>
    </div>





  1. // JQuery
  2. $(document).ready(function()
    {
        $("[id^=divColorThis]").html(function(index, html)
        {
            return html + " Test";
        });
       
        $("[id^=divColorEach]").each(function ()
        {
            $(this).html(function(index, html)
            {
                return html + " Test";
            })
        });
       
        $("[id=moveLeft]").click(function (event)
        {
            event.preventDefault();
           
            $("[id=mainImg1]").animate(
            {
                "left": "-=100px",
                "height": "-=50px",
                "width": "-=89px"
            }, "slow", function()
            {
                // Animation complete
            });

            $("[id=mainImg2]").animate(
            {
                "left": "-=100px"
            }, "slow", function()
            {
                // Animation complete
            });
        });
    });




































That is my code.  Whenever the Left link is clicked I wanted to move both images to the left while shrinking the one image.  If you view the html, the two images are centered and are equal sizes.  When the Left link is clicked, the final result is what I want it to look like.  My problem is, the animation.  The image jumps to the corner of the containing div and resizes.  I need the image to stay on the bottom and I need the image to resize from the top-right corner rather than the bottom-right.  Does any one know how I could accomplish this?  Thank you.