JQuery slide jumps on some divs
I am building a small site, so here is my problem:
I have a first title div that contains a title. It has a position relative and everything inside is an absolute position, but I think we don't really care about that.
Below I've got my main container div without a specific positioning, and some <h1>
and <p>
in it. Each h1
clicking a button opens some content below with a jQuery slide.
This is the code . Sliding part
$("#container_" + tabName).slideToggle
The thing is, in the example I called "buggy" in this example, as well as everyone else in my dev version, the jQuery slide jumps at the beginning and end of the animation.
I did some searches, I found that I needed to set a specific width, but nothing changed. Tried a lot of things but I really can't seem to find how to do this.
source to share
See this fiddle: http://jsfiddle.net/8s9VB/
.container_projects .mainSmallText{
padding-top: 25px;
}
.container_projects .mainSmallSubText{
font-weight: bold;
}
#container_professionalXP{
line-height: 3px;
padding-bottom: 20px;
}
#container_professionalXP .mainSmallText{
padding-top: 30px;
}
source to share
Ok, this is basically a markup issue within your paragraph. I edited one part of it and added the padding to the div, not the box inside the paragraph. Here's one part that I edited:
#container_professionalXP{
line-height: 3px;
margin-bottom: 20px;
padding-top:30px;
}
#container_professionalXP .mainSmallText{
margin: 0px;
padding:0px;
}
source to share