切換淡入幻燈片

Question

在下面的代碼中，我試圖讓div在幻燈片上滑動，然後在鼠標離開後淡出。這樣做最簡單的方法是什麼？

$(window).load(function(){ 
     $('div.description').each(function(){ 
     $(this).css('opacity', 0); 
     $(this).css('width', $(this).siblings('img').width()); 
     $(this).parent().css('width', $(this).siblings('img').width()); 
     $(this).css('display', 'block'); 
    }); 

    $('div.wrapper').hover(function(){  
     $(this).children('.description').stop().fadeTo(700, 0.8); 
    },function(){ 
     $(this).children('.description').stop().fadeTo(700, 0); 
    }); 

}); 

Answer 1

$('div.wrapper').mouseenter(function(){  
    $(this).children('.description').stop().fadeTo(700, 0.8); 
}).mouseleave(function(){ 
    $(this).children('.description').stop().slideUp(700); 
}); 

相當簡單。不保證代碼可以工作，但它有正確的想法。你應該使用mouseenter和mouseleave，因爲它不會在每次更改包裝div中的元素時觸發。它會跟蹤鼠標何時進入div的範圍，然後很好地離開它們。我不記得這是不是一個問題，但我不相信。如果你的div是之後的height:0，你可能需要slideDown(0)然後hide()之前fadeTo()。