1

I have the following problem:

Using .show() and .hide() the tool slides different panels into view, which works fine. However the whole div which is being animated, moves down a few pixels while the animation is running.
Once the animation has finished (stopped running), the div snaps back to the position it should be in.

This is the code for the animation (slide) I am currently using to get from Status A to Status B: ('Inputs shown' to 'Selects shown')

$(this).parent().find('#input').hide('slide',{ direction: "right" }, 400, function () {
    $(this).parent().find('#select').show('slide',{ direction: "left" }, 400, function() {
        $('#selectLabel').focus();
    });
});

In the JSFiddle that I will link at the bottom of the question, you can also see the code for when I want to get back from Status B to Status A.

So far I have tried using .toggle() instead of .show() and .hide() like this:

$(this).parent().find('#input').toggle('slide',{ direction: "right" }, 400, function () {
        $('#selectLabel').focus();
});

and the other way around but the problem stays the same.

I also tried adding a min-height of 500px to the wrapping div's but once again, the problem stays the same. The animated div moves down and snaps back up in the end. Removing classes didn't help as well.

jQuery: bootstrap jquery 1.11.3
jQueryUI: bootstrap jqueryUI 1.11.4
Bootstrap: 3.1

I am not sure if it makes a difference but the javascript is being loaded from inside the body and not the head.

As promised here the link to the JSfiddle: https://jsfiddle.net/tjky76wp/

Anyone an Idea what I am doing wrong? How can I prevent the animated div to move up while it is being animated?

EDIT:
I just realized that I gave u guys the link to an outdated JSFiddle, here the correct one: https://jsfiddle.net/tjky76wp/1/

Djensen
  • 1,337
  • 1
  • 22
  • 32
Erez
  • 11
  • 1
  • 4
  • As far as I observed, it is because of
    , when you remove it, it works smoothly. I don't know the reason but hr is the problem.     – Burak Karakuş Sep 28 '17 at 13:03
  • Thanks for the fast reply however: I tried that BUT then it is being cut at the bottom instead of moving up while being animated. – Erez Sep 28 '17 at 13:05
  • Yes, I realized it right after I commented. It looks like text of create button comes after the animation ends. – Burak Karakuş Sep 28 '17 at 13:06
  • This is what I though the first time i noticed the Problem, but the Text does not disappear from the button. If you go ahead and change the speed of the animation to 8000 for example u will be able to see the top of the 'C' and the 't' – Erez Sep 28 '17 at 13:08
  • Did you check this question and answers? https://stackoverflow.com/questions/16222252/jquery-slide-left-to-right-makes-div-jump-up-on-slide – Burak Karakuş Sep 28 '17 at 13:09
  • 1
    I did before I wrote the question and once again now (in case I made something wrong) but sadly it does not work for me. The animation isn't jumping around anymore but it is not shown in the right place. Everything is shown outside the div it should be in and it looks like the panels which are animated are using "float:left". – Erez Sep 28 '17 at 13:32
  • I see.Unfortunately I couldn't come up with any solution, sorry for that. – Burak Karakuş Sep 28 '17 at 13:35
  • 1
    That's okay, at some point either I or someone else will ;-) Thanks a lot for trying. – Erez Sep 28 '17 at 13:39

1 Answers1

0

Okay so i found a workaround, or better said, i found someone who already found a workaround for it.

Apparently I didn't do enough research yesterday because the answer to my question can be found here: jQuery slideToggle jumps around

For those too lazy to click:
Setting 'overflow: hidden' on the sliding div (#input and #select in my case) will make the problem disappear.

I assume this has something to do with the properties being set for the div while the animation is running.

EDIT: I can only accept my answer as correct tomorrow, which I will do then.

Erez
  • 11
  • 1
  • 4