如何在Javascript函数中使用JQuery？

Question

一直在使用JS和css，但对于动画，我认为JQuery会更好。 所以代码是

<div class="button" id="button1" onclick="function1()">
<script>
    function function1(){
        var e = document.getElementById("front_page_blur");
        if(e.style.animationName !== "slide") {                              
            e.setAttribute("style", "position:relative;");           
            e.style.animationName = "slide"; 
            e.style.animationDuration = "1s";
            $("function1").click(function(){   // this code is the problem, I want "button1_animation" to fade in. 
                $("#button1_animation").fadeIn(3000);
            }
            document.getElementById("button1_animation").setAttribute("style", "display:block;");
        } else {                                                       
            e.style.animationName = "back";
            e.style.animationDuration = "1s";
        }
    }
</script>

除了Jquery代码之外，一切正常，我希望“button1_animation”淡入而不是仅显示。我会发布整个代码，但这将占用大量空间，这是唯一的问题。如何让它淡入而不仅仅是显示？