单击时使用 jquery 切换停止和启动动画答案

【问题标题】：Toggle stop and start animation with jquery on click单击时使用 jquery 切换停止和启动动画
【发布时间】：2012-11-28 09:08:24
【问题描述】：

我有一个菜单，我使用 jquery 对其进行动画处理。当您单击菜单中的“a”时，会加载一些 ajax 内容。

我想停止你所在页面的链接 (A) 的动画并给它另一种颜色。当您单击另一个链接时，前一个链接会再次变为动画并再次具有旧颜色。

这是函数：

$.fn.flipNav = function(options) {

        options = $.extend({
            speed : 200
        }, options);

        return this.each(function() {

                console.log(this);

            var nav = $(this),
                lis = $('li', nav),
                anchors = $('.inactive', lis).css('padding', 0),
                spanHeight;

            $.each(anchors, function() {
                var a = $(this),
                    val = a.text();

                a.html('<span>' + val + '</span> <span>' + val + '</span>')
                 .parent('li')
                    .height(a.children('span:first').outerHeight())
                 .end()
                 .children('span:first')
                    .css('marginTop', 0) // strange for IE
            }); 

            spanHeight = lis.eq(0).height();

            lis.hover(function() {
                $(this).find('span:first').animate({
                    marginTop : '-' + spanHeight
                }, { duration: options.speed, queue : false });
            }, function() {
                $(this).find('span:first').animate({
                    marginTop : 0
                }, { duration: options.speed, queue: false });
            });

        }); // end each

    }

这是我处理的一些代码：

$(".inactive").click(function(){
$("#navigatie ul li a").each(function(){
            $(this).removeClass("active").addClass('inactive');
            });

        $(this).removeClass("inactive").addClass('active');
        $(this).find('span').css("color", "#BE1823");

        $(this).find('span:first').stop(true, true);

    });

我对所有的工作代码都很感兴趣：http://jsfiddle.net/388Qs/ 如您所见，颜色会发生变化，但动画不会停止。

【问题讨论】：

标签： jquery list hyperlink hover jquery-animate

【解决方案1】：

将此部分更改为

lis.hover(function() {
                $(this).find('a:not(".active") span:first').animate({
                    marginTop : '-' + spanHeight
                }, { duration: options.speed, queue : false });
            }, function() {
                $(this).find('a:not(".active") span:first').animate({
                    marginTop : 0
                }, { duration: options.speed, queue: false });
            });

它应该处理动画部分。背景颜色仍然需要重新应用，但我认为您提到的问题区域应该修复。

【讨论】：