Question

我正在尝试在div上实现animate函数，当鼠标悬停在它上面时文本会稍微扩展，然后在鼠标离开时返回到原始大小。

现在我的代码，每当我将鼠标悬停在它上面时，它就会一直缩小成一个小矩形。我做错了什么？

    <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函数需要$和少量重新格式化，最后有一对（）括号。

jQuery Animate功能无法正常工作

1 个答案: