Question

我使用jQuery Mobile构建移动应用程序。在介绍屏幕上我想添加从左到右和从右到左动画/移动的图像覆盖整个图像。下面是添加动画效果的功能。不幸的是，当我更改左侧属性时，它会在过渡时添加空白区域。

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

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

    $(document).ready(function () {

        moveLeft();

    });

此外，过渡并不顺利。我想添加像LinkedIn应用程序介绍屏幕的过渡效果。任何人都可以共享显示具有多个图像的动画的示例示例。

谢谢大家。

DEMO http://jsfiddle.net/J2RPq/

Answer 1

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

＆＃13;

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

＆＃13;

#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; 
    
}

＆＃13;

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

＆＃13;

Answer 2

我发现了这个：

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

你的代码和那个代码之间的主要区别是“符号，有时候你必须使用简单的代码（'）。（检查整个代码，可能还有其他区别）

我已经尝试过你的代码只是改变它的工作属性。（Chrome版本40.0.2214.93（64位））

此外，我建议使用图形核心，它总是对我有用。就像：

http://raphaeljs.com/reference.html

非常简单，真的很漂亮...希望这个帮助：）

使用Jquery水平地动画图像

2 个答案: