1

我正在使用 CSS 和 JS 来制作小动画，但它在某些浏览器上闪烁，我不知道这是否是最好的方法，关于做这个动画主动脉的最佳方法有什么想法吗？

基本上，我想要的只是让所有未选择的项目稍微褪色，并将一个悬停在上面以脱颖而出。实时示例：http : //meeped.co.uk:93/ 主页按钮部分上的推荐部分。

JavaScript

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

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);
}
4

2 回答 2

0

要启用可能解决问题的硬件加速，请将 3D 翻译添加到您的 CSS 类。

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
于 2013-09-05T09:59:29.257 回答
0

hover() 事件会在您将鼠标移到该元素上时触发。我宁愿像这样使用 mouseEnter() 和 mouseOut() 事件：

$(".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
}
于 2013-09-05T09:44:34.057 回答