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