Question

我想知道是否有任何方式（使用jQuery）获得与页面相同的效果 - 客户想要相同的效果，但是在jQuery中（这是在actionscript - http://www.shoppingmetropolitanobarra.com.br/site/web/lojas.php中）。

我试图变成jQuery代码，但没有成功：

http://jsfiddle.net/pq667/2/

将有几个容器，每个容器都有多个缩略图，使用jQuery animate方法，即容器已完成，应使用fadeOut效果，fadeIn使用下一个容器（发生页面加载时）。

有什么建议吗？

Answer 1

我经常从http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/更改此代码段。任意jQuery对象上的自执行回调链 via：temp01

(function hidenext(jq){
    jq.eq(0).fadeOut("fast", function(){
        (jq=jq.slice(1)).length && hidenext(jq);
    });
})($('div#bodyContent a'));

您可以将上面的内容更改为以下内容：

$('.block').hide();

(function showNext(ele){
    ele.eq(0).fadeIn('slow', function(){
        (ele=ele.slice(1)).length && showNext(ele);
    });
})($('.block'))

这是我设置的jsFiddle，向您展示可能性：http://jsfiddle.net/hqgVS/

Answer 2

这种确切的效果只能通过CSS3转换实现。原因是缩放文本。你当然可以通过改变元素的大小甚至字体来伪装它，但是要达到预期的效果会非常困难。

例如：

<强> jQuery的：

$('li').each(function(i, el) {
    setTimeout(function() {
        $(el).addClass('show');
    }, ($('li').length - i) * 500);
});

<强> CSS：

li.show{
   -webkit-transition:all 1s ease-out;
   opacity:1;
   -webkit-transform:scale(1);   
}

<强>演示： http://jsfiddle.net/6xL7R/
（在像Chrome这样的webkit浏览器上查看，因为我省略了其他供应商的前缀）

您可以使用jQuery执行不透明度动画：

<强> jQuery的：

$('li').css({'opacity':0}).each(function(i,el){
    $(el).delay(($('li').length-i)*500).animate({'opacity':1},1000);
});

（我小提琴中的评论部分）

也许这两者的结合对你有用吗？在兼容的浏览器上显示比例。

或者使用http://modernizr.com/

检查浏览器

Answer 3

你需要玩定位，正如你所看到的那样，但这会导致你要求的淡入，延迟，淡出......

http://jsfiddle.net/pq667/11/

这只是在第一个动画之后添加另一个延迟的情况，然后是另一个动画来执行相反的操作。

我建议绝对将它们放置在一个相对定位的容器内，并为位置（左侧和顶部）以及宽度和高度设置动画。

Answer 4

看看我的示例http://jsfiddle.net/qEAJu/20/，如果要实现缩放效果，请考虑使用this plugin进行css转换。

jQuery淡入容器，淡出并淡入下一个容器

4 个答案: