2

picbox.us サイトのギャラリーに取り組んでいますが、画像にカーソルを合わせるとラグが発生します。画像情報の高さを 40 にアニメーション化するだけで、それだけです。しかし、場合によっては遅くなったり遅くなったりします。ここにページがあります：http://zachrip.net/widgets/gallery/

この問題に関連する唯一のコードは次のとおりです。

JQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".image").hover(
function () {
$("#" + this.id + "info").animate({height: '40'}, 700);
}
);
$(body).hover(
function(){
    $(".imageinfo").animate({height: '0'}, 700);
}
);
$("#container").hover(
function(){
    $(".imageinfo").animate({height: '0'}, 700);
}
);
});
</script>

HTML:

<div id='container'>
<center>
<p>Beta testing image gallery</p>
<table cellpadding="1" cellspacing="5">
<tr>
<td><center><img class="image" id="1" src="img1.png"/></center><p id="1info" class="imageinfo">Uploaded by muny</p></td>
<td><center><img class="image" id="2" src="img1.png"/></center><p id="2info" class="imageinfo">Uploaded by zachrip</p></td>
<td><center><img class="image" id="3" src="img1.png"/></center><p id="3info"  class="imageinfo">Uploaded by seanrice</p></td>
</tr>
<tr>
</table>
</center>
</div>
4

2 に答える 2

1

私はこのようなものを提案します：

http://jsbin.com/uzucuh/1/edit

$('.imgBox').on('mouseenter mouseleave',function( ev ){  
  var mEnt = ev.type=='mouseenter'; 
  $('span', this).stop().animate({bottom: mEnt? 40 : 0 }, 300);  
});
于 2012-11-26T00:50:20.030 に答える
0

これを試して：

$(document).ready(function() {
    $(".image").mouseenter(
    function() {
        $("#"+this.id+"info").animate({
            height: '40'
        }, 500);
    });
    $(".image").mouseleave(
    function() {
        $("#"+this.id+"info").animate({
            height: '0'
        }, 500);
    });
});​

上記の別の書き方は次のとおりです。

$(document).ready(function() {
  $(".image").hover(
    function() {
      $("#"+this.id+"info").animate({
        height: '40'
      }, 500);
    },
    function() {
      $("#"+this.id+"info").animate({
        height: '0'
      }, 500);
    });
});​

基本的に、ホバーイベントをマウスの入力および終了イベントに置き換えました。また、アニメーションが完了するまでの時間を 700 ミリ秒から 500 ミリ秒に短縮しました。

余談ですが、ソース コードを少し変更する必要があります。jquery-ui.min.jsヘッダーとquery.jsページの途中でインポートしています。query.jsフッターと のui.min.js後にインポートする必要がありquery.jsます。includes/jquery.inview.jsまた、とへのパスincludes/muny.jsが間違っています。

于 2012-11-26T01:00:58.263 に答える