1

私のコードがホバー時に要素を「不透明度：1」に設定せず、要素を回転させる理由を探していました。html と js は以下のとおりです。

要素が選択されていない (rwunselected クラスを持っている) 場合、ホバー時に機能を実行する必要があるという考え。

<table cellpadding="0" cellspacing="10">
<tr>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/cellists.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/elegance.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/musicrooms.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/absolution.png" border="0" /></td>
</tr>
<tr>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/helpmankind.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/liva.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/anthonybrown.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/blairjohnstone.png" border="0" /></td>
</tr>
<tr>

<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/questiventi.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/surveycentre.png" border="0" /></td>
</tr>
</table>

JavaScript

//set opacities

$('.recentworkitem').css('opacity','.15');

//hover effect on all items with class recentworkitem

$('.recentworkitem').hover(function(){
    if($(this).hasClass('rwunselected')){
        $(this).stop().animate({opacity:'1'},{duration:300})
        $(this).stop().rotate({animateTo:-90, duration:300})
    }
},
function(){
    if($(this).hasClass('rwunselected')){
        $(this).stop().animate({opacity:'.15'},{duration:300})
        $(this).stop().rotate({animateTo:0, duration:300})
    }

});

//click function

$('.rwunselected').click(function(){
    //swap image opacities and classes
        $(this).removeClass('rwunselected');
        $(this).animate({opacity:'1'},{duration:300});
        $('.rwselected').addClass('rwunselected');
        $('.rwselected').animate({opacity:'.15'},{duration:300});
        $('.rwselected').removeClass('rwselected');
        $(this).addClass('rwselected');

    //rotate the old selected item back to 0 degrees
        $('.rwunselected').rotate({animateTo:0, duration:300})
});
4

3 に答える 3

2

あなたはすぐにそれを止めています。両方のアニメーションで1回だけ停止する必要があります。

$('.recentworkitem').hover(function(){
    if($(this).hasClass('rwunselected')){
        $(this).stop().animate({opacity:'1'},{duration:300}).rotate({animateTo:-90, duration:300});
    }
},
function(){
    if($(this).hasClass('rwunselected')){
        $(this).stop().animate({opacity:'.15'},{duration:300}).rotate({animateTo:0, duration:300});
    }

});
于 2013-03-14T10:58:13.347 に答える
1

animateこれは、2 番目のものを呼び出して最初のものを停止しているためです。

$(this).stop().animate({opacity:'1'},{duration:300});              
$(this).stop().rotate({animateTo:-90, duration:300});

completeハンドラーを使用します。

$(this).stop().animate({opacity:'1'},{duration:300}, function () {
    $(this).rotate({animateTo:-90, duration:300});
});

これで、2 つ目は最初の 1 つが完了したときにのみ起動します。

于 2013-03-14T10:54:38.537 に答える
0

jQuery のアニメーション効果には非同期の動作があると思います。そのため、コードは不透明度のアニメーションを開始し、すぐに停止して回転を開始します。

不透明度アニメーションの完了時またはコールバックで回転を呼び出す必要があります。

とにかく、両方の効果を同時に持ちたい場合は、関心のある効果のコードを「マージ」して新しい効果を作成することを含むカスタム ソリューションを指定する必要があります。例はここにあります: How can I複数の同時 jquery 効果を実行しますか?

于 2013-03-14T10:55:35.257 に答える