Question

我需要一个脚本的帮助，但我不知道如何制作它。我以前做过各种各样的动画剧本，但这不是它。

所以，基本上我有一个目录显示一堆图像（带有一些文字）。我希望图像从左上角逐渐消失（比如从左上角到右上角200像素）。

我不确定我是否可以在这里使用.effect（'transfer'）。有什么想法吗？

编辑：我已经制作了这个代码，它的工作原理是okaish。我只是想知道我怎么能一块一块地移动它？就像一个.catalog每说0.1秒间隔

jQuery(document).ready(function($) {
$(".catalog").animate({
    marginLeft: '-=150px',
    marginTop: '-=150px'

            }, 0);
$(".catalog").animate({
    marginLeft: '+=150px',
    marginTop: '+=150px',
    opacity: '1'

            }, 800);


});

Answer 1

检查一下，我想这可能会回答你的问题

<强> HTML

    <div class="container">
        <div class="catalogContainer clear"><img src="http://www.plancraft.co.uk/Opening%20Page%20186.jpg" class="catalog" /><br /><span>boat</span></div>
        <div class="catalogContainer clear"><img src="http://www.speedcrete.co.uk/images/bc230.jpg" class="catalog" /><span>hoe</span></div>
        <div class="catalogContainer clear"><img src="http://www.plancraft.co.uk/Opening%20Page%20186.jpg" class="catalog" /><span>boat</span></div>
    </div>

<强> CSS

.container
{
    float: left;
    max-width: 80px;
}

.catalogContainer
{
    display: none;
    height: 90px;
    width: 80px;
}

.catalog
{
    height: 50px;
    width: 80px;
}

.clear
{
    clear: both;
}

<强> JQuery的

$(document).ready(function () 
{
    $(".catalogContainer").each(function(i) 
    {
        $(this).delay((i++) * 500).animate({
            marginLeft: '-=150px',
            marginTop: '-=150px'
        }, 10).fadeTo(1000, 1);
    });

    $(".catalogContainer").each(function(i) 
    {
        $(this).delay((i++) * 500).animate({
            marginLeft: '+=150px',
            marginTop: '+=150px',
            opacity: '1'
        }, 800);
    });
});

查看Fiddle了解演示

jQuery图像淡入淡出并在负载上移动

1 个答案: