使用 Jquery 水平动画图像

Question

我有使用 jQuery Mobile 构建的移动应用程序。在介绍屏幕上，我想添加 animate/move 从左到右和从右到左覆盖整个图像的图像。下面是添加动画效果的函数。不幸的是，当我向左属性改变时，它会在过渡时添加白色 space。

/*Moving image horizontally*/
    function moveRight() {
        $("#sample").animate({ left: "+=20" },8000, moveLeft)
    }

    function moveLeft() {
        $("#sample").animate({ left: "-=20" }, 8000, moveRight)
    }

    $(document).ready(function () {

        moveLeft();

    });

此外，过渡并不顺利。我想添加过渡效果，如 LinkedIn 应用程序介绍屏幕。任何人都可以分享显示多张图片动画的示例吗？

谢谢大家。

演示版 http://jsfiddle.net/J2RPq/

Answer 1

我找到了这个：

http://demos.jquerymobile.com/1.0a1/experiments/api-viewer/docs/animate/index.html

你的代码和那个代码之间的主要区别是 " 符号，有时你必须使用简单的符号 (')。（检查整个代码，也许还有其他区别）

我已经尝试了您的代码，只做了那个更改，它可以工作属性。（Chrome 版本 40.0.2214.93（64 位））

此外，我建议使用图形核心，它总是对我来说效果更好。就像：

http://raphaeljs.com/reference.html

真的很简单，真的很漂亮...希望对您有所帮助:)

Answer 2

您可能会发现 CSS 过渡运行得更顺畅。只需将 transition:left 属性添加到 #sample 样式声明中，每当您更改元素的 left 属性时，它就会被动画化。

$(function(e) {
    $("#sample").css("left","100%");    
});

#sample {
    left:0%;
    position: relative; 
    border:1px solid green; 
    background:yellow; 
    width: 100px; 
    height:100px;

    -webkit-transition: left 5s ease;
    -moz-transition: left 5s ease;
    -o-transition: left 5s ease;
    transition: left 5s ease; 
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sample">Sample</div>

使用 Jquery 水平动画图像

Animate Images Horizontally using Jquery

jquery

jquery-mobile