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

Question

我有一个简单的旋转木马实现，我试图对其进行一些调整以满足一些非常具体的要求。

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

当鼠标移动到轮播中的另一个可见缩略图时，我需要它滑动到那个缩略图，并将叠加层中的文本更新为新的图像编号(从 x图片数量)。

现在，我花了将近一整天的时间来尝试让动画完美呈现。我尝试了多种方法，但我感到非常沮丧。这可能是由于我缺乏 CSS3 忍者风格。

Here is a fiddle for the relavant HTML, CSS and jQuery carousel implementation which needs a working version of the slidy-boxy thing described above.

Answer 1

这是一个 updated version fiddle 的。 <img>的代码如下鼠标悬停事件:

// 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 的问题属性为其原始偏移量。