如何在函数完成后使用 jquery 制作动画 - 让第二个函数等待？答案

【问题标题】：how to animate using jquery after a function has finished - make the second function wait?如何在函数完成后使用 jquery 制作动画 - 让第二个函数等待？
【发布时间】：2013-09-20 16:03:22
【问题描述】：

我有一个简单的 jQuery 代码，它通过隐藏一个并显示另一个来交换两个图像，我正在寻求使用淡入淡出效果来交换图像，但由于这两个图像并不位于每个图像的顶部其他我不能简单地淡化顶部图像导致显示底部图像，我想淡化第一张图像，然后将 css 显示属性设置为 none，然后以 0 的不透明度显示第二张图像，并逐渐将第二张图像的不透明度设置为 100。但是当我添加淡化图像的代码时，它不起作用并且display none 不等待淡入淡出完成。如何让函数等待前一个函数完成？

$('.thumbs').hover(
        function() {
           console.info('in');
           $(this).children('.first').css('display','none'); 
           $(this).children('.second').css('display','block')
        },
        function() {
           console.info('out');
           $(this).children('.second').css('display','none'); 
           $(this).children('.first').css('display','block')
         }
);

HTML 代码：

<div class='thumbs'>
            <div class='first'><?php the_post_thumbnail()?></div>
            <div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>
                 </div>

【问题讨论】：

您也可以发布您的 HTML 吗？另外，逐渐改变不透明度的代码在哪里？您发布的代码会立即隐藏/显示 div。
@Osiris：我添加了 html 和不透明度更改它是相同的代码，只有 $(this).children('.first').css('opacity','0') ;在 display:none 部分之前添加，然后在 display 块之后添加 $(this).children('.second').css('opacity','100') 记住第二张图像的不透明度首先设置为 0 .

标签： javascript jquery html css

【解决方案1】：

1) delay() 方法允许我们延迟执行队列中跟随它的函数。 http://api.jquery.com/delay/

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

2)使用callbacks

$("#divId1").animate({opacity:.1},1000,function(){
    $("#divId2").animate({opacity:.1},1000);    
});

【讨论】：

使用回调函数听起来是正确的方法，但问题是我想使用 $(this).children('.first') 并且它似乎曾经在回调函数中 ($ this) 语句没有引用它应该引用的包装器。

【解决方案2】：

像这样：

setTimeout(function() {
    console.log('out');
    $(this).children('.second').css('display', 'none');
    $(this).children('.first').css('display', 'block');
}, 1000);

【讨论】：

【解决方案3】：

我还没有测试，但这应该可以完成工作：

$('.thumbs').hover(
    function(){
       var $that = $(this);
       $(this).children('.first').fadeOut(1000, function(){
           $(this).css('display','none');
           $that.children('.second').fadeIn(500);
       });
    }
    ,
   function(){
       var $that = $(this);
       $(this).children('.second').fadeOut(1000, function(){
           $(this).css('display','none');
           $that.children('.first').fadeIn(500);
       });
    }
);

【讨论】：

【解决方案4】：

试试

$('.thumbs').hover(
        function() {
           var second = $(this).children('.second');
           $(this).children('.first').fadeOut(1000, function(){
              second.fadeIn(1000,function(){});
           }); 
        },
        function() {
           var first= $(this).children('.first');
           $(this).children('.second').fadeOut(1000, function(){
              first.fadeIn(1000,function(){});
           }); 
         }
);

Working Fiddle

【讨论】：

我试了下代码，不知道为什么不褪色，只是消失又出现，
@Farzan 检查小提琴示例