FlexSlider结巴/淡入淡出

Question

I am using Flexslider (the older version 1.0 with jquery 1.4.8 support) on the following test page: http://www.showstyle.lu/service/startv2/

As you can see the slider is implemented on the top left and bottom right images (in the upper part of the content). When I test this offline through dreamweaver there are no stutter effects or lag effects but in chrome/firefox/opera the fade effect begins but then rushes into the next slide in a quite awkward fashion.

It doesn't look smooth, in IE it doesn't fade at all but that's ok, it's IE afterall (rip IE)

I looked through Stackoverflow and plenty pages on google people mention that it is a float related issue across Firefox mainly and not many occurences in Chrome.

I looked through my sliders and inspected them & unticked various classes in the css to see if it would impact the fluidity of the slider but no luck so far so I can't really pinpoint the code that is interfering with the slider.

Any experience dealing with this?

Thanks in advance!

Answer 1

I'm not sure this will help, but in your style.css you have this bit of code for slider transition:

* {
-moz-transition: color 0.3s ease;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
transition: opacity .25s ease-in-out; */
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity 3s ease-in-out; */

}

By removing the bottom 3 properties I was able to get a much smoother transition on your slider (did this by inspecting the element and editing CSS). Therefore, if this section of your CSS was just this:

* {
-moz-transition: color 0.3s ease;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;

I think you'll get the smoother transition you're looking for. (This was done in Chrome, and have not tested other browsers).