1

I'm using the slide animation from jQuery UI to insert a div between two others in a row, but when triggering the animation, what happens is the space needed for the div to slide jump appears without animation and then animation comes in.

EDIT: JSFiddle issue fixed thanks to the guys below. New JSFiddle is: https://jsfiddle.net/7ryukzd7/3/ But the initial issue remains :-)

For a reason I don't get, in JSFiddle the div doesn't slide inline but breaks (which doesn't happen in a browser)... Anyway the point is illustrated nonetheless. (this is now solved)

My code:

HTML:

<div class="bloc cover" style="background-color: blue;"><p class="readmore_button">Read More</p></div>
<div class="bloc hidden" style="background-color: red"><p>Lorem ipsum dolor sit amet. </p></div>
<div class="bloc cover" style="background-color: blue;"></div>
<div class="bloc cover" style="background-color: blue;"></div>

CSS:

.bloc {
    display: inline-block;
    vertical-align: top;
}
.cover {
    width: 100 px;
    height: 100 px;
}
.hidden {
    height: 100 px;
    width: 200 px;
}

JS with jQuery UI:

$('.hidden').hide();

$('.readmore_button').on('click', function() {
    $(this).parents('.bloc').next('.hidden').toggle("slide", 1000);
});

I saw similar issues here: jQuery UI show using slide animation jumps to full height before animation starts but couldn't adapt it to my situation.

Any help would be much appreciated, either on the reason why inline-block breaks with animation in JSFiddle (solved) or on the actual issue :-)

Community
  • 1
  • 1
A.Puig
  • 11
  • 2
  • You can try `.ui-effects-wrapper { display: inline-block!important; }` though I don't know if that's the effect you're going for. – Michael Coker Jan 29 '17 at 21:20
  • Thanks! I edited my original post with @Stevangelista's fix. My initial issue remains, though. – A.Puig Jan 31 '17 at 11:46
  • I think you're misunderstanding how the slide animate behavior implemented via the toggle function works - it only animates the element(s) being targeted, not any & every element around it in the DOM. If you want the `div` elements to the right of the target one to also be animated, you need to code it as such. – Stevangelista Jan 31 '17 at 14:32

1 Answers1

0

@Michael Coker is correct; in the course of animating the div.hidden, the slide animation effect applies temporary CSS to the element, which includes a clobbering of your display:inline-block.

One option is indeed to override the native jQ-ui style; another is to not rely on inline-block styling for your div elements so that the animation does not react that way. One way to do so would be with floated elements:

.bloc {
  /*display: inline-block;*/
  vertical-align: top;
  float: left;
  margin: 0 2px /* added to recreate the spacing inline-block elements have */
}

https://jsfiddle.net/7ryukzd7/3/

Stevangelista
  • 1,799
  • 1
  • 10
  • 15
  • Thanks for pointing that out! I've edited my initial post, now the JSFiddle is fine but my animation issue remains :) – A.Puig Jan 31 '17 at 11:45