1

我有一个简单的 jQuery 代码，它通过隐藏一个并显示另一个来交换两个图像，我正在寻求使用淡入淡出效果来交换图像，但是由于这两个图像没有相互重叠，我不能只需淡化顶部图像导致显示底部图像，我想淡化第一个图像然后将 css 显示属性设置为 none 然后显示第二个图像的不透明度为 0 并逐渐将第二个图像的不透明度设置为 100。但是当我添加淡化图像的代码，它不起作用并且显示 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>
4

4 回答 4

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);    
});​
于 2013-09-20T06:04:14.540 回答
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);
       });
    }
);
于 2013-09-20T06:04:34.897 回答
1

像这样：

setTimeout(function() {
    console.log('out');
    $(this).children('.second').css('display', 'none');
    $(this).children('.first').css('display', 'block');
}, 1000);
于 2013-09-20T06:02:11.193 回答
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(){});
           }); 
         }
);

工作小提琴

于 2013-09-20T06:05:49.483 回答