Question

请看看我到目前为止做了些什么（在这里有一些好人的帮助！）

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

我有三个横幅图像淡入，其次是左列中的两个，最后是右列中的一个。

但是，客户希望首先淡入“项目”一词，然后是左栏中的每个图像，然后是“和”，然后是“属性”，然后是右栏中的图像。

我可以通过改变三个div中每个div中的.delay（）值来获得正确的序列，但是起搏是不可能的。

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

Answer 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] )

Answer 2

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

实施例

$(document).ready(function(){
     $('#project_banner').fadeIn('slow', function(){
        //This is called after fade in 
        $('#project_and_banner').fadeIn('slow',function(){
           // And so on
        });   
     });
});

Answer 3

您可以指定回调，当函数完成其工作时将调用此回调函数

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

首先它将淡出#one，然后#two然后#three

Answer 4

试试 Demo

DEMO CODE

这是它的简单jQuery

var mySequence=["one","two","three","four","five","six"];
$.each(mySequence,function(i){
  $("." + mySequence[i]).delay(1000*i).fadeTo(1000,1);
});

无法使用jquery使我的图像以正确的顺序淡入淡出

4 个答案: