如何在函数完成后使用jquery进行动画处理 - 让第二个函数等待?

时间:2013-09-20 05:55:52

标签: javascript jquery html css

我有一个简单的jQuery代码,它通过隐藏一个并显示另一个来交换两个图像,我正在尝试使用淡入淡出效果来交换图像,但由于这两个图像不是位于每个图像的顶部其他我不能简单地淡化顶部图像,导致显示底部图像, 我想淡化第一个图像,然后将css显示属性设置为无,然后显示0不透明度的第二个图像,并逐渐将第二个图像不透明度设置为100.但是,当我添加淡化图像的代码时,它不起作用,显示器没有等待淡入淡出完成。如何使功能等待之前的功能完成?

$('.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>

4 个答案:

答案 0 :(得分:3)

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);    
});​

答案 1 :(得分:1)

像这样:

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

答案 2 :(得分:1)

我还没有测试,但这应该做的工作:

$('.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);
       });
    }
);

答案 3 :(得分:0)

尝试

$('.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