jQuery 中从右到左问题的动画

Question

正如您在此处看到的：http://jsfiddle.net/poxgawf4/，它的工作方向是左右方向。我想做的恰恰相反；从右到左。我怎样才能做到这一点？谢谢

$(".inno-bg").mouseenter(function(){
    $(this).find("h2").stop(true, true).animate({
        'marginTop': "-=60px"
    }, 200);
    $(this).css('background-image', 'none');
    $(this).css("background-color", "#1A6397");
    $(this).stop(true, false).animate({ width: "320px" });
    $(this).find("p").fadeIn( 1000 );
});

$(".inno-bg").mouseleave(function(){
    $(this).find("h2").stop(true, true).animate({
        'marginTop' : "+=60px"
    }, 200);
    imageUrl = "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/02/gaia_calibration_image/14263603-2-eng-GB/Gaia_calibration_image_node_full_image_2.jpg";
    $(this).css('background-image', 'url(' + imageUrl + ')');
    $(this).stop(true, false).animate({ width: "160px" });
    $(this).find("p").hide();
});

Answer 1

从右到左设置动画时，您需要将其绝对定位在其容器内。这是因为默认情况下元素键控到左上角，需要更改为右上角。试试这个，注意我在这里只包括了我 changed/added 的属性：

.row {
    position: relative;
}
.inno-bg {
    position: absolute;
    top: 0;
    right: 0;
}

Example fiddle

jQuery 中从右到左问题的动画

Animating right to left issue in jQuery

jquery

animation