javascript - 如何为右侧的文本设置动画

Question

fiddle :https://jsfiddle.net/6avyo8zf/

JQuery:

$(function () {
    $(".content-box").hover(function () {
        $(this).children("div:first-child").find(".hdrText").animate({ 'marginLeft': '+=100%' }, 2000);
    }, function () {
        $(this).children("div:first-child").find(".hdrText").animate({ 'marginLeft': '-=100%' }, 2000);
    });
});

我如何修改脚本，以便在悬停时，文本向右动画，直到到达右侧黑色边框，悬停后，文本返回到原始位置。

Answer 1

如果内容不是太动态，因为图像是固定大小的，你可以使用类似的东西:

$(function () {
    var hdr =$(".content-box").hover(function () {      
    hdr.stop().animate( {left: $(this).parent().width() - hdr.width() - startoffset } , 2000);
    }, function () {
    hdr.stop().animate({left:0}, 2000);
    }).find("div:first-child>.hdrText").css('position', 'relative');
  var startoffset = hdr.offset().left;
});

Fiddle

left 动画需要相对位置，此处用jquery 设置，但也可以在css 中设置。 .stop() 是额外添加的，以确保停止先前的动画。例如悬停结束时，左侧的动画仍在执行。