How to Move an Image from Margin: Auto?

I'm working on a responsive site and I have looked all over the web with no prevail.

I am trying to animate an image that has it's margins set to auto initially and then animate it to a specific position (i.e. to: margin-top: 4px & margin-left: 30px). Anything I do that gets it moving jumps because of the margin set to auto - but the image needs to be responsively in the middle horizontally for mobile devices as its initial state and animate smoothly.

HTML:

<div class="logoWrapper">
    <img class="logo" src="some.png"/>
</div>

CSS:

.logo {
    display: block;
    width: 90px;
    height: 90px;
    margin-top: 90px;
    margin-left: auto;
    margin-right: auto;
    z-index: 14;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
}
.logoShrink {
    margin-top: 4px;
    width: 20px;
    height: 20px;
}
.logoWrapper {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 15;
}

jQuery:

jQuery('.logo').addClass('logoShrink');

I know this is an issue for many but nothing I can find works; Lets get a real solution here. Any help would be greatly appreciated. THNX!!

Answers


I suggest to center the image with position: absolute and left: 50% and margin-left: -50%. It can be done because its parent is position: fixed.

.logo {
    display: block;
    position: absolute;
    width: 90px;
    height: 90px;
    margin-left: -45px;
    left: 50%;
    top: 90px;
    z-index: 14;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
}

After that, transitioning top, left and margin-left will do what you want.


Need Your Help

Calling WCF service asyncronously in a loop

wcf multithreading

In my WPF client, I have a loop that calls a WCF service to update some records. When the loop is done, I display a message, "Update complete".

Use XSL:FO to add attachments to PDF

xslt pdf mime xsl-fo fop

After resolving inline images with help from SO, I need to sort out inline attachments. PDF can contain attachments and I found:fo:declarations - pdf:embedded-file but again it pointed to an external

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.