1

I am using CSS and JS to do small animation, but it's flickery on some browser and I don't know if it's the best way to do it, any ideas of what is the best way to go with on doing this aorta of animation?

Basically, all what I want is to make all the items that are not selected to fade a bit and the one is hovered over to stand-out. Live Example: http://meeped.co.uk:93/ Testimonials section on the home page buttom section.

THE JavaScript

$(".testimonial").hover( function() {
    $(".testimonial").addClass('testimonialNotActive');
    $(this).removeClass('testimonialNotActive').addClass('testimonialActive');
},
function(){
    $(".testimonial").removeClass('testimonialNotActive');
    $(this).removeClass('testimonialActive');
    }
);

The CSS

/*Home Page SectionD*/
#home-sectionD .testimonial {
background-color: #FAFAFA;
border: 1px solid #3C5476;
margin-bottom: 10px;
}

.testimonialNotActive {
    opacity: 0.6;
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    filter:alpha(opacity=60);   
}

.testimonialActive {
    -webkit-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 25px -2px rgba(0,0,0,0.4);
}
3
  • Live example didn't load for me. Sep 5, 2013 at 9:37
  • Personally I don't see any problem with your code or how it works.
    – Krasimir
    Sep 5, 2013 at 9:37
  • It flicker on Safari for some reason.
    – user2162270
    Sep 5, 2013 at 9:42

2 Answers 2

0

To enable hardware acceleration, which might solve the issue, add 3D translations to your CSS classes.

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
0

The hover() event is triggering all the time you move your mouse over that element. I'd rather use mouseEnter() and mouseOut() events like this:

$(".testimonial").mouseenter( function() {
    $(".testimonial").removeClass('testimonialActive').addClass('testimonialNotActive');  // also removeing active class
    $(this).removeClass('testimonialNotActive').addClass('testimonialActive');
}

$(".testimonial").mouseout( function() {
    $(".testimonial").removeClass('testimonialActive').removeClass('testimonialNotActive'); // or whatever class you want to remove
}
3
  • And is it flickering in the moment you are changing mouse position from one to other element or while you mouse moving on one element? Because this works for me: jsfiddle.net/BvLFA/1 (tested on opera and firefox)
    – Mikec007
    Sep 5, 2013 at 10:50
  • That is why! it's flickering because you are moving from one hovering over the space that is between them is what makes the flicker, any ideas around this mate?
    – user2162270
    Sep 5, 2013 at 11:27
  • Yes, you need to set up function for "turning off those classes" and call the function with small delay. Next you need to set up some kind of locker, which tells you current mouse position (either it's on or out of element). Than in function just control mouse position and if mouse is not above the element, turn off. I hope you better understand it from my example, it's definitely clearer: jsfiddle.net/BvLFA/6
    – Mikec007
    Sep 5, 2013 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.