jquery - 事件接事件接事件发生

Question

我会一个接一个地制作这个代码。这是可能的？

$('#carouselselectitem1').click(function() {
    $('#foo2').animate({opacity: "0"}, function() {
        $(this).load("carousel/todos.html");
        $('#foo2').animate({"opacity":"1"});
        $('#carouselselectitem1').css({'background-color' : '#FF0000' , 'opacity' : '1'});
    });
});

Answer 1

如果我正确理解您的问题，则必须使用回调函数：

$('#carouselselectitem1').click(function() {
    $('#foo2').animate({opacity: "0"}, function() {
        $(this).load("carousel/todos.html", function() {
            $('#foo2').animate({"opacity":"1"}, function() {
                $('#carouselselectitem1').css({'background-color' : '#FF0000' , 'opacity' : '1'});                          
            });
        });
    });
});

Answer 2

只是测试它：

$('#carouselselectitem1').click(function() {
    $('#foo2').animate({opacity: "0"},1000 , function() {
        $(this).load("carousel/todos.html");
        $('#foo2').animate({"opacity":"1"},1000,function(){
             $('#carouselselectitem1').css({'background-color' : '#FF0000' , 'opacity' : '1'}); 
        });
    });
});

Answer 3

您需要对该load函数使用回调以及其他回调。我还建议缓存选择器。

$('#carouselselectitem1').click(function(){
  var carousel = $(this),
      foo2     = $('#foo2');
  foo2.animate({opacity: "0"}, function(){
    foo2.load("carousel/todos.html", function(){
      foo2.animate({opacity:"1"}, function(){
        carousel.css({'background-color' : '#FF0000','opacity' : '1'});
      });
    });
  });
});

Answer 4

您可以使用 jQuery 触发事件。看这里： Trigger Event底部有一个例子，button_2在button_1上触发点击事件