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

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 に答える