falauthy falauthy - 1 month ago 9
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(){
$(this).finish().effect("bounce",1000);
}); //End of hover() animate


HTML:

<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">
</div>
</div>
<a href="#projects"><button name="projects" class="hideme">Check my projects</button></a>


CSS:

.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:
https://jsfiddle.net/avm7a6oa/12/

How can I repair this?

Answer

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.

Comments