CODEWITHSUNDEEP
jqueryhtmlcssgoogle-chromeanimation
user3137768
user3137768

Reputation:

Animation works in FF but bad effect in chrome

I have an 'absolute positioned' section that is hidden to the right of main content. Upon menu selection, I animate this section to the left as 

mysection.stop().animate({
    left:'200px'
},2000,'easeOutBounce',function(){
    menuobj.css({
        borderLeft:'1px solid green',
        borderTop:'1px solid green',
        borderRight:'1px solid green',
        height:'-=1',
        width:'-=2'
    });
});

After animation, I'm adding a border for menu.
This worked perfectly before I add a flex slider in that section. After adding a jQuery flex slider inside that section, I got weird animation inside chrome. But works fine inside Firefox. Following is a screenshot of the effect from chrome. Before animation

During animation

In the above pictures, the section is with gray background that I'm talking about.
Why this happens? Is there any specific hack for webkit?

Edit

I tested it in a high performance(Graphics card inserted) pc, and it works perfect :o
So, is it system dependent? I'm totally confused.

Upvotes: 3

Views: 261

Answers (2)

Markus Kottländer
Markus Kottländer

Reputation: 8268

I made some changes to you custom.js which apply a workaround. Not really a solution but looks better than at the moment. It hides the flexgallery on animation start and fades it back in on animation end.

custom.js

43: $('#nav li').click(function() {
44:     $('#ProjContent').hide(); // added
45:         var menuitem=$(this);

and

168: $('#ProjContent').hide(); // added
169:     maincontent.animate({top:0},2000,'easeOutBounce',function(){
170:         $('#ProjContent').fadeIn(250); // added

Upvotes: 1

Brian S
Brian S

Reputation: 121

First of all, does the animation work properly in Chrome if you disable the flex slider?

If it does work OK without having the flex slider within the moving area, try waiting for the animation to complete before loading the flex slider in place. Not sure if this is possible for you, as we don't yet have a live test version to fiddle with. I would imagine it is possible, however.

If it works, you will probably have to disable the flex slider afterwards as well (when you want the animated area to go away). Having a thumbnail image in place within the animated area should allow you to maintain the look that it is "populated" with the slider while animating. If executed correctly, the user will never know that the slider only really showed up after the animation finished.

Upvotes: 1

Related Questions