jQuery Animate函數無法正常工作

Question

我正在嘗試在div上實現動畫功能，當鼠標懸停在其上時，文本會稍微擴展，然后在鼠標離開時返回其原始大小。

現在，使用我的代碼，每當我將鼠標懸停在它上面時，它就會不斷縮小為一個小矩形。 我做錯了什么？

    <script>
    $(function () {
        var container = $('div.slider').css('overflow', 'hidden').children('ul'),
            slider = new Slider(container, $('#slider-nav'));

        slider.nav.find('button').on('click', function () {
            slider.setCurrent($(this).data('dir'));
            slider.transition();
        });
    })();

</script>

<script type="text/javascript">
    (function () {
        //var dd = $('dd');
        //dd.hide();

        $('dd').filter(':nth-child(n+4)').hide();
        $('dl').on('click', 'dt', function () {
            $(this)
                .next().hide()
                .slideDown(200)
                //.show()
                .siblings('dd')
                .slideUp(200);
            //.hide();
            //$(this).next().show(); 
        });
    })();
</script>

<script type="text/javascript">
    $(function () {
        $('#admission').on('mouseenter', function () {
            $(this).animate({ 'fontSize': '+=2', 'height': '+=25', 'width': '+=20' }, 'swing')
        });
        $('#admission').on('mouseleave', function () {
            $(this).stop().animate({ 'fontSize': '-=2', 'height': '-=25', 'width': '-=20' }, 'swing')
        });
    });
</script> 

最后一個<script>.... ('#admission')..代碼就是存在此問題的代碼。

Answer 1

我這樣修改，效果很好。

$(function() {
        $('#admission').on('mouseenter', function () {
            $(this).animate({ 'fontSize': '+=2', 'height': '+=25', 'width': '+=20' }, 'swing')
        });
        $('#admission').on('mouseleave', function () {
            $(this).stop().animate({ 'fontSize': '-=2', 'height': '-=25', 'width': '-=20' }, 'swing')
        });
    });
</script> 

ready函數需要$和很少的重新格式化，並且最后還有一對（）括號。