I am currently hiding and showing elements on my dom with a little button that rotates upon click back and forth:

$(".buttonLayout").on("click", function () {
                            var classTohide = ".classToHide"   this.id

                            if (!isRotated) {
                                $(classTohide).hide()
                                isRotated = true
                                $(this).addClass("rotate-180back");
                                $(this).removeClass("rotate-180");
                            }
                            else {
                                $(classTohide).show()
                                isRotated = false
                                $(this).addClass("rotate-180");
                                $(this).removeClass("rotate-180back");
                            }
                        });

it really works beautifully, but the issue is, that the elements simply dissapear in within one frame and it looks a bit confusing.

How can I make this behavior better? So that instead of just hiding, it kinda "moves up" and then hides?

Any tips? :)

EDIT:

this is my css:

.buttonLayout {
    width: 15px;
}

.rotate-180 {
    transform: rotate(180deg);
    transition: transform 100ms;
}

.rotate-180back {
    transform: rotate(0deg);
    transition: transform 100ms;
}

And this is my div (long):

    <div >
        <table >
            @{ 
                var position = 0;

                for (int i = 0; i < Model.MainNodes.Count(); i  )
                {
                <tr>
                    <td>
                        <div >
                            @Model.MainNodes[i].name
                        </div>
                        <!--subcategory-->
                        <table >
                                @for (int y = 0; y < Model.MainNodes[i].children.Count(); y  )
                                {
                                    <tr>
                                        <td>
                                            <div >
                                                <table>
                                                    <tr>
                                                        <td>
                                                            @Model.MainNodes[i].children[y].name

                                                        </td>
                                                        <td>
                                                            <div >
                                                                <img src="@Url.Content("~/Content/images/icons/icon-open.png")" id="@position"  />
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <!--subsubcategory-->
                                            <table >
                                                @{
                                                    string classToHide = "classToHide"   position;

                                                    for (int x = 0; x < Model.MainNodes[i].children[y].children.Count(); x  )
                                                    {
                                                        <tr >
                                                            <td>
                                                                @Model.MainNodes[i].children[y].children[x].name
                                                            </td>
                                                            <td>
                                                                <button  onClick="AddSubSub(@y);">SubSub löschen</button>
                                                            </td>
                                                        </tr>
                                                    }
                                                    <tr >
                                                        <td >
                                                            <button  onClick="AddSubSub(@y);">Neue SubSub hinzufügen</button>
                                                        </td>
                                                    </tr>
                                                }

                                            </table>
                                        </td>
                                    </tr>
                                    position  ;
                            }
                        </table>
                    </td>
                </tr>
                }
            }
        </table>
    </div>

CodePudding user response：

I tried slideUp but it just does nothing and then the div is gone after a few millisecs

You cannot use .slideUp / .slideDown on a tr or td.

One work-around, though there are probably better solutions, is to wrap the content of each td in a div or span and then animate those, example:

$("#close1").click(function() {
  $(this).closest("tr").slideUp()
})
$("#close2").click(function() {
  var tr = $(this).closest("tr");
  tr.find("td>div,td>span,td>img").slideUp(() => tr.hide());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr><td>Content 1</td><td>Content 2</td><td><button id='close1'>close immediately</button></td></tr>
<tr><td><span>Content 3</span></td><td><div>Content 4</div></td><td><button id='close2'>close with slide</button></td></tr>
</table>