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上调用stop。这将使不透明度保持在目前的状态。我改为：

$(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();
    }
});

现在它工作得很好。

figcaption的不透明度正在神秘地改变

1 个答案: