增强动画（JavaScript+CSS）

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

基本上，我想做的就是让所有未选中的项目稍微褪色，而悬停在上面的项目则显得突出。现场示例：主页按钮部分的推荐部分

JavaScript

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

---

每次将鼠标移到该元素上时，都会触发悬停事件。我宁愿使用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
}

---

要启用硬件加速（这可能会解决此问题），请将3D翻译添加到CSS类中

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

---

没有为我加载Live example。就我个人而言，我认为您的代码或其工作方式没有任何问题。出于某种原因，它在Safari上会闪烁。它是在您将鼠标位置从一个元素更改为另一个元素时闪烁，还是在您将鼠标移动到一个元素时闪烁？因为这对我有效：在opera和Firefox上测试，这就是为什么！它之所以闪烁是因为你是从一个悬停在它们之间的空间上移动的，这就是为什么会闪烁的原因，关于这个伴侣有什么想法吗？是的，你需要设置关闭这些类的函数，并以较小的延迟调用该函数。接下来，您需要设置某种锁柜，它会告诉您当前鼠标位置是否在元素上。在功能中，只需控制鼠标位置，如果鼠标不在元素上方，请关闭。我希望你能从我的例子中更好地理解它，它肯定更清楚：

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