CSS styles in a JQUERY

Question

0.00/5 (No votes)

See more:

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 3-Feb-12 3:59am

thomasriley

Updated 3-Feb-12 4:41am

Sridhar Patnayak

v2

Add a Solution

2 solutions

Add a Solution

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

Martin Arapovic · Answer 1 · 2012-02-03T04:40:00

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:

JavaScript

$("#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.

thomasriley · Answer 2 · 2012-02-03T04:54:00

Solution 2

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.

Posted 3-Feb-12 4:54am

thomasriley

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. :-(

CSS styles in a JQUERY

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

CSS styles in a JQUERY

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us