Question

I’m new to JQuery (and JavaScript/AJAX in general) and am encountering a problem with hiding elements.

When I use the code below the animation works and the element is hidden but as it is being hidden it is shifted onto a new line along with everything after it. This happens with horizontal hide as well but not with opacity.

Is there a way to stop this from happening or am I missing something out somewhere? The links appear on a line like this:

Related Tags: Tag1 Tag2 Tag3

Code Snippets:

HTML

<script type="text/javascript" src ="JQuery.js"></script>
<script type="text/javascript" src ="test.js"></script>

<strong>Related Tags: </strong>

<a href=#>Tag1</a>
<a href=#>Tag2</a>
<a href=#>Tag3</a>

JS

$(function() {
     $("a").click(function(event){
        event.preventDefault();
        $(this).animate({height: 'hide' },"Fast");
    });
});

Thanks in Advance,

Dave

Answer 1

The reason it’s happening is that you’re animating over the height attribute. Manually setting height would imply block view, and that’s why you’re being shifted to a new line.

If you don’t have a problem with it, you could switch to fadeOut for hiding, and that probably won’t cause the same error. Otherwise, the dirty workaround would have to be setting float: left on the anchors. For this to be a neat solution, you’d have to put them in a container, and clear them (because floating objects don’t occupy any space in their parent unless they’re cleared)

<p>
    <a style="float: left;">...</a>
    <a style="float: left;">...</a>
    <a style="float: left;">...</a>
    <div style="clear: both;"></div>
</p>