鼠标悬停时在轮播顶部设置绝对定位的 div 动画

Question

我有一个简单的轮播实现，我正在尝试对其进行一些调整以匹配一些非常具体的要求。

有一个绝对定位的覆盖层，当页面首次加载时突出显示轮播的第一个缩略图。

当鼠标移至轮播中的另一个可见缩略图时，我需要它滑动到该缩略图，并将叠加层中的文本更新为新图像编号（在 x 幅图像中） ）。

现在，我花了将近一整天的时间试图让动画顺利进行。我尝试了多种方法，但我感到非常沮丧。这可能是因为我缺乏 CSS3 忍者能力。

这里是相关 HTML、CSS 和 jQuery 轮播实现的小提琴，需要 slidy- 的工作版本上面描述的四四方方的东西。

Answer 1

这是小提琴的更新版本。 mouseover 事件的代码如下：

// References to commonly used elements
var $ul = $(".carousel ul");
var $overlayImageCounter = $('.overlayImageCounter');

// Original offset of the overlay.  Use it to correct the position we'll be
// moving it to over each image.
var offset = $overlayImageCounter.position().left;

// Mouseover binding go now!
$(".carousel img.galleryThumb").mouseover(function() {

    // The image that triggered our mouseover
    $img = $(this);

    // Animate the overlay to the image's left position.
    // Correct for carousel's current left margin and overlay's original offset
    $overlayImageCounter.stop().animate({
        left: $img.position().left + parseInt($ul.css('marginLeft'), 10) + offset
    });

    // Update the text of the overlay
    $imageCounter.text($ul.find('img').index($img) + 1 + "/" + nThumbs);

});

需要调整的代码的最后一点是重置轮播的上一个/下一个操作上的叠加层的左侧位置。我没有添加这一点，但这只是将 left 属性动画到其原始偏移量的问题。