falauthy falauthy - 9 months ago 57
Javascript Question

Margin and padding reset after jquery effect

I have issue with jquery effect on image hover. Before hovering a few times on image it looks like this:

enter image description here

After hovering my image stick to the button like this:

enter image description here

Here's my JS:

//For animate images in skills
$('.skills, .contact').find('img').hover(function(){
}); //End of hover() animate


<div class="row future hideme">
<div class="col-lg-3 col-xs-4 col-lg-offset-1">
<img src="images/angular.png" alt="AngularJS" title="AngularJS">
<a href="#projects"><button name="projects" class="hideme">Check my projects</button></a>


.hideme { opacity: 0; }
.row { margin: 0 0 0 350px; }

.future {
margin: 0 0 50px 500px;

button {
background: none;
outline: none;
border: 1px solid #D4DFE6;
padding: 13px;
border-radius: 5%;
padding: 50px 0 0 0 0;

And here's fiddle:

How can I repair this?

Answer Source

The problem that you have is caused by JqueryUI that put position:absolute; when you apply a bounce. This is resolvable by putting your img or the element that will get the bounce inside a div with position:relative; and the right height

Working DEMO.