javascript - figcaption 的不透明度正在神秘地变化

Question

我正在尝试使用 jquery.caption ( https://github.com/louisbros/jquery.caption )。我希望标题位于带有白色文本的黑色矩形中。当我将鼠标悬停在我的图像上时，其中一些正确显示了标题，但其他一些则根本不显示，而另一些则显示得非常浅且难以看清。当我将鼠标悬停在图像上时，一些正在显示它的人停止显示它。如果我查看 HTML，我可以看到不透明度发生了变化，这就是标题有时不可见的原因。当我第一次打开页面时，大多数元素的不透明度 = 1，但其他元素的数字非常小，如 0.00301952217705548。当我四处移动鼠标时，以 opacity=1 开头的元素将变为非常小的数字。

这是我创建元素的代码:

$image_div = $('<div />')
   .addClass('gImage-row')
   .appendTo($preview);
$image_div.append($('<a />')
   .addClass('no-highlight')
   .attr('href', "{{ IMAGE_DIR }}"+image.image.replace(/thumbnail/,'jpg'))
   .attr('rel', "superbox[image]")
   .append($('<img />')
   .addClass('gImage')
   .attr('alt', 'some text')
   .attr('src', "{{ IMAGE_DIR }}"+image.image)
   .attr('onerror', "noimage(event)")));

这是一个循环，它会创建 30-40 张图像。

在我的 window.onload 函数中，我这样做:

$('.gImage-row img').caption();

这是我的 CSS:

.figure{
    position:relative;
    margin:0;
    padding:0;
}

.figcaption{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:20px;
    background-color: black;
    foreground-color: white;
    opacity:1.0;
}

a:hover.no-highlight {
    background: transparent;
}

.gImage-row {
   float: left;
   text-align: center;
}

.gImage {
    width: 150px;
    height: 100px;
    margin-right: 1px;
    background-color: transparent;
}

.label {
    float: left;
}

我不知道是什么导致不透明度发生变化或如何解决这个问题。有人有什么想法吗？

Answer 1

所以我想我明白这里发生了什么。 jquery.caption 中的代码是这样做的:

$(this).bind('mouseenter.caption mouseleave.caption', function(){
    $(this).data('caption').figcaption.stop().fadeToggle();
});

fadeToggle 通过改变不透明度来工作。因为我有太多图像靠在一起，所以当用户用鼠标四处移动时，会发生很多 mouseenter 和 mouseleave 事件，并且每次发生时都会在现有的 fadeToggle 上调用停止。这将使不透明度保持在当前的任何位置。我将其更改为:

$(this).bind('mouseenter.caption mouseleave.caption', function(){
    if ($(this).data('caption').figcaption.css('display') == 'none') {
        $(this).data('caption').figcaption.show();
    }
    else {
        $(this).data('caption').figcaption.hide();
    }
});

现在它运行良好。