CODEWITHSUNDEEP
jquery
mr.Liviu.V
mr.Liviu.V

Reputation: 162

Fancybox stoping other jquery animation on run

Fancy box stops the jquery animation when starting . I have this js script :

        $("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);
        });

when I click a FANCYBOX link located inside DIV .portfoliodetails the animation on mouseleave stops and remains frozen .

Any idea what to do ? from what I understand I need to make jQuery run the mouseleave animation.. but how ?

Upvotes: 1

Views: 653

Answers (2)

mr.Liviu.V
mr.Liviu.V

Reputation: 162

Solved like this : I added 2 call functions when FANCYBOX starts, at start and when it is close

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

Upvotes: 1

Mo Valipour
Mo Valipour

Reputation: 13496

Try the following change to see if it helps:

Change your animation() calls to bellow:

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

by doing this you first stop any running animation and then run new animation which prevents any collision.

Upvotes: 1

Related Questions