2

我正在为 picbox.us 网站制作一个画廊，当我将鼠标悬停在图像上时，我变得迟钝。它应该只是将我的图像信息的高度设置为 40，仅此而已。但有时它会滞后或延迟。这是页面：http: //zachrip.net/widgets/gallery/

这是与该问题有关的唯一代码：

查询：

<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 回答