1

I got the following code: Link, As you can see when you write somthing in the input the textarea shows up, The problem is just before the effect is finished a small gap is created between the submit input and the textarea, The interesting thing is that:

When i replace this line:

qCont.show("blind", {to: { display: "block"}}, 1500);

With this line:

qCont.css("display", "block");

The problem is solved, But i do want this effect is there a way to fix it and use the "show" effect, Thank you all and have a nice day.

Aviel Fedida
  • 4,004
  • 9
  • 54
  • 88

2 Answers2

1

Alright. There's a bottom margin of 5px being applied to the textarea.

It's a hack, but I solved this by adding the following css:

#qContent
{
  margin-bottom: -5px !important;
}

Here's the fiddle: http://jsfiddle.net/CWP8E/3/

As an alternative, you can add an anonymous function that executes AFTER the show effect animation. This also fixes the appearance (and I favor it a bit more):

qTitle.one("keydown" ,function(){
        qCont.show("blind", {to: { display: "block"}}, 1500, function() {
            $(this).css("display","block");
        });
    });

Here's the fiddle for this: http://jsfiddle.net/CWP8E/4/

I'm still looking into WHY the 5px margin is being inserted (something in jQquery?), but the hacks above fix the visuals. I do understand it's a hack but sometimes that gets us going on our way.

When stepping through thee code, I noticed that the jQuery animation ends with the qTitle having a display: inline-block value, not display: block as anticipated. A quick search on Google reveals this second solution (with the anonymous completion function) to be recommended.

Here's a StackOverflow article that describes it:

jQuery fadeIn() results in display: block for inline element

Community
  • 1
  • 1
John Kroetch
  • 1,143
  • 8
  • 15
0

try 

qCont.show("blind", {direction:"vertical"}, 1500);
Orangepill
  • 24,500
  • 3
  • 42
  • 63