小提琴：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);
});
});
如何修改脚本，以便在悬停时，文本会向右设置动画，直到它出现在正确的黑色边框上并且悬停时，文本将返回到原始位置。
答案 0 :(得分：1)
您只能使用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/
我刚刚意识到你需要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>
我会推荐hoverIntent jQuery插件，以避免在动画仍在运行时多次触发该函数..
答案 1 :(得分：1)
如果你想要纯粹的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);
});
});
答案 2 :(得分：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;
});
left动画需要
位置相对，并在此处使用jquery设置，但也可以在css中设置。 .stop（）是一个额外的补充，以确保停止上一个动画。例如当悬停结束时，左边的动画仍在执行。
答案 3 :(得分：0)
首先，您需要添加边距权限以抵消添加到左侧的边距。这将给出文本移动的印象，而无需调整自身大小或移动页面。你会想要等量的负数：
{'marginLeft': '+=100%', 'marginRight': '-=100%'}
我也注意到，当快速盘旋时，动画会变得浑浊。您可以查看mouseenter和mouseleave以及在动画之前添加一个stop（）来取消上一个动画：