2

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

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

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

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

有什么建议么？

4

4 回答 4

1

我经常从http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/更改此片段。任意 jQuery 对象上的自执行回调链通过：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/

于 2012-10-10T16:47:03.860 回答
1

这种确切的效果只能通过 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/检查浏览器

于 2012-10-10T16:58:33.830 回答
0

看看我的示例http://jsfiddle.net/qEAJu/20/，如果你想实现这种缩放效果，请考虑使用这个插件进行 css 转换。

于 2012-10-10T17:04:54.717 回答
0

You'll need to play with positioning, as you'll see, but this does the fade in, delay, fade out that you asked for...

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

It was simply a case of adding another delay, after the 1st animate, and then another animate to do the opposite.

I'd recomment positioning them all absolutely, inside a relatively positioned container, and animating the position (left & top) as well as the width and height.

于 2012-10-10T16:39:01.530 回答