jQuery 图像在加载时褪色和移动

Question

我需要有关脚本的帮助，但我不确定如何制作它。我以前做过各种动画脚本，但这个 none 喜欢。

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

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

编辑：我已经制作了这段代码并且它工作正常。我只想知道我怎样才能一块一块地移动它？就像一个 .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 图像在加载时褪色和移动

jQuery image fading and moving on load

html

css

wordpress

jquery