創建一個jQuery的淡入淡出效果

我調整一個插件我必須把它從一個滑動效果，淡入淡出改變。創建一個jQuery的淡入淡出效果

在側翻它當前幻燈片的標題DIV進入視野。我需要做到這一點，因此這個淡入視野，我被卡住了（我沒有JS程序員的傷心，通常可以調整，但我卡住了）

舊的JS代碼如下，並移動一個div上移106pxs。

$(document).ready(function(){ 
      $('.boxgrid.caption').hover(function(){ 
       $(".cover", this).stop().animate({top:'15px'},{queue:false,duration:160}); 
      }, function() { 
       $(".cover", this).stop().animate({top:'106px'},{queue:false,duration:160}); 
      }); 
     });

但我不能鍛鍊如何將效果更改爲在翻轉時的翻轉和淡出過程中的淡入。我會把我的代碼，但它很差，並沒有工作。我可以排序的CSS開始改變透明度等

來源

2013-03-22 Mr Burble

我想看到一些HTML伴隨於此，如果可能的話。你應該使用http://jsfiddle.net/發佈所有javascript/html/css相關的問題，這對每個人都很簡單。 – Sanchit 2013-03-22 12:03:16

'你可以在同一個事件上同時使用兩個'在淡入淡出和淡出過渡。「 – Jai 2013-03-22 12:04:32

以及他的意思當然是鼠標離開... – 2013-03-22 12:05:17

$(document).ready(function(){ 
    $('.boxgrid.caption').hover(function(){ 
     $(".cover", this).stop().animate({ 
      opacity: 1 
     }) 
    }, function() { 
     $(".cover", this).stop().animate({ 
      opacity: 0.4 
     }); 
    }); 
});

來源

2013-03-22 12:04:00

感謝 - 這是偉大的，我唯一的問題是，它只是似乎工作一旦我翻了個身，然後鋪開。所以會發生什麼是覆蓋什麼都不做（如果我把它設置爲不透明度：0.2），直到我將它覆蓋並將鼠標從它上面移除。一旦我完成了它，它完美的工作。但是，如果我將不透明度設置爲0，那麼它似乎根本不起作用？有可能的方式從透明度0.2去混濁1這樣的覆蓋是輕微可見，成爲鼠標懸停 – 2013-03-22 12:45:59

這樣暗？ http://jsfiddle.net/CA4SA/ – 2013-03-22 13:26:36

替代CSS3唯一的解決辦法http://jsfiddle.net/CA4SA/1/ – 2013-03-22 13:29:01

如果你想要一個簡單的鼠標懸停鼠標移出以淡入淡出，並隨後用這樣的方式：

$('.boxgrid.caption').hover(function(){ 
    $(".cover", this).stop().animate({opacity:'1'},{queue:false,duration:160}); 
}, function() { 
    $(".cover", this).stop().animate({opacity:'0'},{queue:false,duration:160}); 
});

來源

2013-03-22 12:07:09 Jai

感謝回答 - 這一次似乎沒有對我 – 2013-03-22 12:43:17

試試這個：

$(document).ready(function(){ 
    $('.boxgrid.caption').on('mouseover',function(){ 
     $(".cover", this).fadeIn(); 
    }).on('mouseout',function() { 
     $(".cover", this).fadeOut(); 
    }); 
});

閱讀mouserover和mouseouthttp://api.jquery.com/mouseover/ 和http://api.jquery.com/mouseout/

也爲fadeIn和fadeOut http://api.jquery.com/fadeIn/和http://api.jquery.com/fadeOut/

來源

2013-03-22 12:07:56

他使用懸停處理工作是完全沒有問題 – 2013-03-22 12:10:11

這是另一種選擇，如果運認爲其更好使用。 – Jai 2013-03-22 12:14:03

創建一個jQuery的淡入淡出效果

回答

相關問題