如何為文本設置動畫

Question

小提琴： 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

您只能使用CSS來執行此操作，而無需該jQuery代碼。 當懸停.content-box時，它基本上通過更改.hdrText 。

演示：

 .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叉： 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> 

jsFiddle演示

我建議使用hoverIntent jQuery插件，以避免在動畫仍在運行時多次觸發該函數。

Answer 2

如果您想要純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/

Answer 3

如果內容不是太動態，例如圖像是固定大小，則可以使用類似以下內容的方法：

$(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（）是一個額外的附加功能，以確保先前的動畫被終止。 例如，懸停結束后，仍在執行向左的動畫。

Answer 4

首先，您需要在右邊添加一個邊距以抵消添加到左側的邊距。 這將給人留下文字移動的印象，而無需調整其大小或在頁面上移動。 您將希望此負數相等：

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

我還注意到，動畫快速懸停時會跳動。 您可以查看它們的mouseenter和mouseleave以及在設置動畫以取消上一個動畫之前添加stop（）：

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

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