如果内容不是太动态，如图像中是固定大小，则可以使用以下内容：

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

小提琴

位置相对是left动画所必需的，在这里使用 jQuery 设置，但也可以在 CSS 中设置。.stop（） 是一个额外的补充，以确保以前的动画停止使用。例如，悬停结束时，左侧的动画仍在执行。

你可以只用CSS来做这件事，不需要那个jQuery代码。它基本上通过在悬停.hdrText时进行.content-box更改来工作。

演示：

.content-box {
  position: relative; /* required for absolute positioning in children to work */
}
.hdrText {
  position: absolute;
  top: 4px;
  left: 44px;
  right: 100%; /* allows us to animate the right offset */
  text-align: right; /* makes sure text does not overflow */
  transition: 2s;
}
.content-box:hover .hdrText {
  right: 10px; /* animate right offset to 10px (gap from edge)
}

<div style="width: 40%; overflow: hidden; float: left; border: 1px solid black;">
  <div class="content-box-blue content-box">
    <div class="title content-box-title">
      <div style="display: inline-block; width: 30px; height: 30px; vertical-align: middle; overflow: hidden; padding: 0 10px 0 0;">
        <img src="theimage.png" style="z-index: 5; display: inline-block; width: 30px; height: 30px; vertical-align: middle;" class="" alt="sd">
      </div>
      <span class="hdrText">Announcements</span>
    </div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
  </div>
</div>

jsFiddle fork： https://jsfiddle.net/azizn/7080u1a1/2/

编辑 - jQuery 解决方案

我刚刚意识到您需要IE9支持。所以基本上不是transition动画，而是使用 jQuery animate函数来移动文本。你必须保留我添加的CSS规则。

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

.content-box {
  position: relative; /* required for absolute positioning in children to work */
}
.hdrText {
  position: absolute;
  top: 4px;
  left: 44px;
  right: 100%; /* allows us to animate the right offset */
  text-align: right; /* makes sure text does not overflow */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width: 40%; overflow: hidden; float: left; border: 1px solid black;">
  <div class="content-box-blue content-box">
    <div class="title content-box-title">
      <div style="display: inline-block; width: 30px; height: 30px; vertical-align: middle; overflow: hidden; padding: 0 10px 0 0;">
        <img src="theimage.png" style="z-index: 5; display: inline-block; width: 30px; height: 30px; vertical-align: middle;" class="" alt="sd">
      </div>
      <span class="hdrText">Announcements</span>
    </div>
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
  </div>
</div>

js小提琴演示

我建议使用 hoverIntent jQuery 插件，以避免在动画仍在运行时多次触发该函数。

如果你想要纯粹的jQuery支持，你可以做到这一点，你只需要计算精确的比例来加减，同时考虑到所有其他元素。

$(function() {
    // Load all needed elements
    var content = $(".content-box");
    var contentTitle = $(".content-box-title");
    var text = content.children("div:first-child").find(".hdrText");
    var theimage = $('#theimage');
    var currentAnimate = null;
    content.hover(function() {
        // Get titles total width
        var contentWidth = contentTitle.width();
        // Get the texts total width
        var textWidth = text.width();
        // Get the images total width
        var theimageWidth = theimage.width();
        // Get the padding on the image
        var imageParentPadding = theimage.parent().css('padding-right');
        // Add text, image and padding + 5 to accommodate changing screen size together so we can subtract that from content width
        var subtractWidth = textWidth + theimageWidth + parseInt(imageParentPadding) + 5;
        // Save value to move back to same position in case screen size changes between animations
        currentAnimate = contentWidth - subtractWidth;
        // Animate margin left by the total content width minus the width of all the other elements and paddings
        text.animate({
            'marginLeft': '+=' + currentAnimate
        }, 2000);
    }, function () {
        text.animate({
            'marginLeft': '-=' + currentAnimate
        }, 2000);
    });
});

小提琴：https://jsfiddle.net/6avyo8zf/7/

首先，您需要向右添加一个边距，以抵消添加到左侧的边距。 这将给人一种文本在不调整自身大小或在页面上移动的情况下移动的印象。 您需要此等量的负数：

{'marginLeft': '+=100%', 'marginRight': '-=100%'}

我还注意到，当快速悬停时，动画会变得跳跃。 您可以查看 mouseenter 和 mouseleave 中的这些内容，以及在动画之前添加一个 stop（） 以取消上一个动画：

https://api.jquery.com/mouseenter/

https://api.jquery.com/stop/