Click here to Skip to main content
14,734,606 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi everyone,

I'm currently working on a website, and part of it requires me to enlarge a picture from its Top-Left corner. I have managed to do this using Position:Absolute.

The problems I am having is that the "slow" duration in my JQuery does not work, and I'm wondering if it's anything to do with my addition CSS stylings to the image itself.

The CSS for the image:

.ceo-image {
    -moz-box-shadow: 0 0 2.5px 2.5px #41627E;
    -webkit-box-shadow: 0 0 2.5px 2.5px #41627E;
    box-shadow: 0 0 5px 5px #41627E;
    width: 100px;
    position: absolute;
    float: right;
    height: 130px;
    margin-top: 4%;
    margin-right: 10%;
}

The JQuery (so far):

<script type="text/javascript">
    $(document).ready(function(){
        $("#ceo-image").css({
            "-moz-box-shadow": 0 0 2.5px 2.5px #41627E,
            "-webkit-box-shadow": 0 0 2.5px 2.5px #41627E,
            "box-shadow": 0 0 5px 5px #41627E,
            "width": 100px,
            "position": absolute,
            "float": right,
            "height": 130px,
            "marginTop": 4%,
            "marginRight": 10%
        });
        $("#ceo-image").mouseover(function(){
            $("#ceo-image").animate({
                "width": 500,
                "height": 530
            }, "slow");
        });
        $("#ceo-image").mouseout(function(){
            $("#ceo-image").animate({
                "width": 100,
                "height": 130
            }, "slow");
        });
    });
</script>

And the image:

<img src="images/staff/ceo.jpg" id="ceo-image" class="ceo-image" />


Any of your comments would be greatly appreciated!
Tom.
Posted
Updated 3-Feb-12 5:41am
v2

Hi,

As I can see from code that you posted everything is ok with your css.
Only thing that makes you problem is jquery css fuction which is used to apply styles to an image. Look at jquery site[^] for help about it.

The code must look like this:
$("#ceo-image").css({
                  '-moz-box-shadow': '0 0 2.5px 2.5px #41627E',
                  '-webkit-box-shadow': '0 0 2.5px 2.5px #41627E',
                  'box-shadow': '0 0 5px 5px #41627E',
                  'width': '100px',
                  'position': 'absolute',
                  'float': 'right',
                  'height': '130px',
                  'margin-top': '4%',
                  'margin-right': '10%'
            });


Notice that css properties an their values are enclosed with ' char.
All other code stays as it is.
   
v2
Comments
Martin Arapovic 3-Feb-12 12:16pm
   
Maybe now will work. I edited answer because margin top/right properties were wrong... :)
Hi Martin,

I have done those minor changes to my CSS in JQuery, it now seems to be operating fine in Google Chrome, but not in IE9.

Is there any specific CSS styles that need to be applied that only IE9 will read? Because the actual motion of the animation is fine, but I think the margins are slightly out.
   
Comments
Martin Arapovic 3-Feb-12 12:15pm
   
Hi,

I don't have ie9 on this laptop (Win XP with IE8), so I can't see whats happening. You can try to validate your css using css validator (http://jigsaw.w3.org/css-validator/#validate_by_input) and then you will see what is wrong.
You can use http://jsfiddle.net/qEPta/ to test your code online.
One more problem can be usage of css3 properties, which are not or partially suported in ie9. Sorry if i didn't helped you. :-(

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900