Peg/change image position to absolute after animation with JQuery

#1

I’ve been trying to play around with some more advanced JQuery animations on my Wiki API project. However, after the animation is complete I am not seeming to have luck providing the translated image with a ‘fixed’ position or absolute property.

My pen is here:

https://codepen.io/abalducci/pen/OzbRME

The respective action to take is click the ‘Learn something new’ button. Image in question is the Wiki Logo in the upper left hand corner (My issue is if you resize the page now width wise it will slide off the screen. I just want it to ‘stay put’.). Image tag is #logo, respective JS are lines 53-56.

As an alternative to just doing a position absolute I also tried to reassign it to a new, different class (i.e. #logoSmall is the black box designated), as well as also just change it’s current class location on the grid (i.e. #logoSmall is the black box designated), but neither of these options seemed to work for me.

Any thoughts ? :confused:

#2

hey abalducci,
your animation looks slick that i wanted to try it myself.
do you really need css grid or jquery animation?
am not good at any so i just used noob css and js :sweat_smile:.
hit “Learn something new” https://codepen.io/pseudop/full/KZEGJa/

#3

Grid is irrelevant for this example.

Technically you don’t need JQuery-- You can manipulate the DOM properties just with Javascript, but JQuery makes it much easier.

That in mind, since even with JQuery animations are ‘relative’ to the current ‘position’ I find the following reusable function to be very useful:

function getCordinates(target) {
var offset = $(target).offset();
return offset;
}

It can used as following:

var x = getCordinates(NameOfDivYouWantToLocateHere).left;
var y = getCordinates(NameOfDivYouWantToLocateHere).top;

This will give you the ‘x’ ‘y’ of the upper left hand corner of the div as to where it lies on the screen (even if it moves). Then at least you know ‘how much’ and ‘what direction’ to perform the animate with JQuery.

#4

You could conceivably make the offset solution work by adding a resize function which then continually makes sure they share the same offset every time you resize the window. You might also consider using percentage units, either in CSS or by taking the page width/height and dividing it by 100 or some other clever solution.

A simpler route is to first define a CSS class where the logo is in the middle of the page, and another where it’s at the top left corner. You would then toggle the class with jQuery while adding a duration. You will need jQuery UI for this to work.

Example here: