[英]Enhance Animation (JavaScript + CSS)
我正在使用CSS和JS來制作小型動畫,但是在某些瀏覽器上它卻忽隱忽現,我不知道這是否是最好的制作方法,關於如何制作這種動畫主動脈的最佳方式的任何想法嗎?
基本上,我想要做的就是使所有未選擇的項目稍微褪色,然后將其懸停以突出顯示。 實時示例: http ://meeped.co.uk:93/主頁“ buttom”部分的“見證”部分。
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);
}
您將鼠標移到該元素上時,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
}
要啟用可能解決該問題的硬件加速,請向您的CSS類添加3D轉換。
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.