jquery set an element to show and hide doesn't work one flash over

Speaking up, are not deep enough for HTML CSS to understand the pot.
The original label was written like this.

<p  class= "Weui-btn-area" >
<a class= "weui-btn weui-btn_primary" href= "id=" Add_friend "> Add to the Friends List </a>
</p>

This is originally hidden, want to click After, surfaced, after a period of time, eliminate

<div id= "Successtoast" style= "Display:none;" >
    <div class= "weui-mask_transparent" ></div>
    <div class= "Weui-toast" >
        <i Class = "Weui-icon-success-no-circle weui-icon_toast" ></i>
        <p id= "successtoastcontent" class= "Weui-toast" __content "></p>
    </div>
</div>

JS Code:

Click Add to Ball Friends List triggers
     $ (document). On ("click", "#add_friend", function () {
               //Send Ajax request to background
        var to_id = $ (' #to_id '). Val ();
       $.ajax ({
            type: "Get",
            URL: "/organize/myorganizerequest?toid=" +to_id,
            success:function (data) {
               Showcompletetoast ("Invite success, waiting for friends to reply.") ");
            },
            error:function (data) {
                alert (data);}}
    )

; function Showcompletetoast (content) {
        $ (' #successtoastContent '). HTML ("");
        $ (' #successtoastContent '). HTML (content);
        if ($ (' #successtoast '). CSS (' display ')!= ' none ') return
            ;

        $ (' #successtoast '). FadeIn (m);
        settimeout (function () {
            $ (' #successtoast '). fadeout (MB);
        }
    

As a result, a flash of wood has. Cannot reach the desired effect.

After looking for some, and found that the reason was actually here, and

<a class= "weui-btn weui-btn_primary" href= "id=" Add_friend "> Add to Club Friends List </a>

Bad is bad in this a tag, it clicks is to refresh the page Ah, of course, will affect our processing.
It's OK to change it to a button.

Be careful to use a variety of labels, do not mess,