折叠效果切换

Question

我有一个用于导航栏的小切换脚本。如何添加动画效果？

这是剧本。

@GET
@Produces("application/json")
@OAuthSecurity(enabled = false)
@Path("/users/{userId}")

public String getuserById(@PathParam("userId") String userId)

{
           System.out.println(userId);
} 

这就是CSS

$(document).ready(function(){
    $("button").click(function(){
        $(".collapse").toggleClass(".collapse in");
    });
});

Answer 1

你可以在这个CSS中使用元素的opacity：

.collapse {
    opacity:0;
    transition: opacity 1s linear;
}
.collapse.in {
    opacity:1;
}

请参阅this JSFiddle

Answer 2

您可以improve your CSS with elaborated css3 transitions或者您可以使用jQuery slideToggle()。

<强> JS

$(document).ready(function(){
    $("button").click(function(){
        $(".collapse").slideToggle();
    });
});

<强> CSS

.collapse {
  display: none;
}

选中fiddle。