Question

Fancy box在启动时停止jquery动画。我有这个js脚本：

        $("a[class=fancybox]").fancybox({
            'hideOnContentClick': true,
            'titlePosition'     : 'outside',
            'overlayColor'      : '#3d6a87',
            'overlayOpacity'    : 0.9
        });

        $('.portfoliobox').live('mouseenter', function(e) {
            $(this).closest('.portfoliobox').find('div.portfoliodetails').animate({marginLeft: '0', opacity: 0.8}, 200);
        });

        $('.portfoliobox').live('mouseleave', function(e) {                                    
            var $widthofdiv = $(this).closest('.portfoliobox').find('.portfoliodetails').width();
            $(this).closest('.portfoliobox').find('div.portfoliodetails').animate({marginLeft: $widthofdiv}, 200);
        //  alert($widthofdiv);
        });

当我点击位于DIV .portfoliodetails内的FANCYBOX链接时，mouseleave上的动画停止并保持冻结状态。

知道该怎么办？根据我的理解，我需要让jQuery运行mouseleave动画..但是如何？

Answer 1

尝试以下更改以查看是否有帮助：

将你的animation（）调用更改为：

$(this).closest(...).stop(true, true).animate(...);

通过执行此操作，您首先停止任何正在运行的动画，然后运行新动画以防止任何碰撞。

Answer 2

解决方法如下：我在FANCYBOX启动时，在开始时和关闭时添加了2个调用函数

        $("a[rel=gallery]").fancybox({
                'onStart': hidedetails,
            'onClosed': hidedetails,
            'titlePosition'     : 'outside',
            'overlayColor'      : '#3d6a87',
            'overlayOpacity'    : 0.9
        });

Fancybox在运行时停止其他jquery动画

2 个答案: