Question

I’m trying to animate some IMG elements by updating the top margin with some simple maths.

It goes like this:

$('.spd2').css('margin-top', - offsetPC * 12 + '%');

It is applyed to IMGs like this:

<img src="img/pgDadosImportantes_i001.png" class="spd1" 
    style="right: 30%; top: 45%; z-index:10;" />

With this style set in css doc:

.ilustras {
    width: 960px;
    height: 100%;
    position: absolute;
    z-index: 0;
}

.ilustras img {
    position: absolute;
    float: right;
    width: auto; 
    height: auto;
    display: inline-block;
}

It works in Firefox and IE very well. The problem is that in chrome, the value of margin-top is not being updated.

I tried several changes to all involved elements, changing attributes as position, float, width, height, display… and chaned some ways of naming marginLeft, margin-left in jQuery.

Nothing is working with Chrome. If I apply a static number it works.

I have a sample here:

http://unitfour.com.br/HotsiteCluster/

Apreciate any help!!

*sorry about my english and my code… I’m a Brazilian Designer working out both!

Answer 1

It was not showing in Webkit (Chrome / Safari) because – in a strange fashion – they don’t get scrollTop(); values. I’ve solved the problem using window.pageYOffset to compose my vars. Hope that help other people! Thank you all for helping!