0

请看看我到目前为止所做的事情（在这里的好人有一点帮助！）

http://www.justthisdesign.co.uk/

我有三个横幅图像淡入淡出，然后是左栏中的两个，最后是右栏中的一个。

但是，客户希望单词“Projects”首先淡入，然后是左栏中的每个图像，然后是“and”，然后是“Properties”，然后是右栏中的图像。

我可以通过更改三个 div 中的每一个中的 .delay() 值来获得正确的序列，但节奏不可能正确。

我应该完全使用不同的技术来获得更多的控制权吗？显然，客户不知道这个“简单请求”涉及多少工作！

4

4 回答 4

1

给每个元素一个 id，包括持有横幅的标签，然后使用 fadeTo 的回调函数一次调用每个元素一次，在前一个元素完成后，类似于

$('#banner1').fadeTo(1000,1,function(){
  $('#banner2').fadeTo(1000,1,function(){
    $('#banner3').fadeTo(1000,1,function(){
    });
  });
});

根据http://api.jquery.com/fadeTo/的语法是

.fadeTo( duration, opacity [, callback] )
于 2012-09-17T13:34:26.830 回答
1

我建议在文档加载后触发淡入。在第一个动画完成后触发下一个动画

例子

$(document).ready(function(){
     $('#project_banner').fadeIn('slow', function(){
        //This is called after fade in 
        $('#project_and_banner').fadeIn('slow',function(){
           // And so on
        });   
     });
});
于 2012-09-17T13:35:22.083 回答
0

可以指定回调，这个回调函数会在函数完成工作时被调用

  $('#one').fadeIn('slow', function() {
     $('#two').fadeIn('slow',function(){
             $('#three').fadeIn();
       });
  });

这里首先它会淡入#one，然后是#two，然后是#three

于 2012-09-17T13:34:54.147 回答
0

试试这个演示

演示代码

这是它的简单 jQuery

var mySequence=["one","two","three","four","five","six"];
$.each(mySequence,function(i){
  $("." + mySequence[i]).delay(1000*i).fadeTo(1000,1);
});
于 2012-09-17T13:53:44.707 回答