3

我有一个带有缩略图的画廊，当单击缩略图时，当前图像淡出，新图像淡入。

但是，我想停止多次单击，因此图像必须完全淡出才能单击新缩略图。

我怎样才能用下面的代码做到这一点？

非常感谢，

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>TEST</title>
<script type='text/javascript' src='jquery-1.9.1.js'></script>

<style type='text/css'>
#imageWrap{
position:relative;
overflow:hidden;
height:534px;
width:800px;
}
.next{
display:none;
}
#imageWrap img{
width: 800px;
position: absolute;
top: 0;
left: 0;
background-color: #000;
}
</style>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.thumbnail').on('click',function(){
$('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />');
$('#imageWrap .active').fadeOut(5500);
$('#imageWrap .next').fadeIn(4000, function(){
    $('#imageWrap .active').remove();
    $(this).addClass('active');
});

});
});//]]>  

</script>

</head>
<body>
<img src="dimming/1.jpg" class="thumbnail" alt="A" width="40" height="40"/>
<img src="dimming/2.jpg" class="thumbnail" alt="B" width="40" height="40"/>
<img src="dimming/C.jpg" class="thumbnail" alt="C" width="40" height="40"/>
<img src="dimming/D.jpg" class="thumbnail"alt="D" width="40" height="40"/>
<img src="dimming/E.jpg" class="thumbnail" alt="E" width="40" height="40"/>

<div id="imageWrap">
    <img src="dimming/C.jpg" alt="Main Image" width="800" height="534" class="active" />
</div>
</body>
</html>
4

2 回答 2

5

通过添加一个布尔标志，您可以在决定做什么之前检查其状态：

// Are we in the middle of an animation?
var currentlyAnimating = false;

$('.thumbnail').on('click',function(){
    if (currentlyAnimating) {
        return;
    }

    currentlyAnimating = true;

    $('#imageWrap').append('...');
    $('#imageWrap .active').fadeOut(5500);
    $('#imageWrap .next').fadeIn(4000, function(){
        $('#imageWrap .active').remove();
        $(this).addClass('active');
        currentlyAnimating = false;
    });
});

当然，您也可以通过查询相关元素的 DOM 或 jQuery 效果队列的状态来进行此检查，但 IMO 使用上述本地化解决方案更简单、更清晰。

于 2013-04-23T09:19:11.140 回答
1

您可以使用选择器进行检查#imageWrap .next并且#imageWrap .active不进行动画处理:animated。

$('.thumbnail').on('click',function(){
   if(!$("#imageWrap .next, #imageWrap .active").is(":animated")){
      $('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />');
      $('#imageWrap .active').fadeOut(5500);
      $('#imageWrap .next').fadeIn(4000, function(){
          $('#imageWrap .active').remove();
          $(this).addClass('active');
      });//this was missing      
   }
});
于 2013-04-23T09:17:44.647 回答