如何添加淡入淡出效果到以下jQuery幻燈片功能？

我有這個滑動功能http://jsfiddle.net/g7LwM/1/如何添加淡入淡出效果到以下jQuery幻燈片功能？

我該如何添加淡入淡出效果呢？所以，當它滑落時，它會淡入，當它滑回去時，它會淡出？

重要提示：我注意到大多數答案使用切換過渡，它與我有的滑動過渡不同。切換和幻燈片有不同的轉換！

2011-11-03 Ilja

您需要動畫： http://jsfiddle.net/manseuk/g7LwM/7/

$(document).ready(function() { 
    $("#trigger").click(function() { 
     $("#test").animate({opacity: 'toggle', height: 'toggle'}); 
    }); 
})

您還可以增加持續時間：

$("#test").animate({opacity: 'toggle', height: 'toggle'},'slow');

來源

2011-11-03 11:50:06 ManseUK

是的，它淡入淡出，我不知道你是否注意到，但滑動功能改變，如果你比較它提琴我提供你可以看到他們是如何不同的滑動。謝謝你的回答）） – Ilja

@IlyaKnaup它是如何改變的？答案stil和你的JSFiddle完全一樣 - 但是會消失......這就是你在問題中所問的問題嗎？ – ManseUK

是的，對不起，讓我感到困惑，在我的例子中谷歌徽標從上到下滑動，在你的小提琴中顯示。範你明白我的意思嗎？如果你比較兩個小提琴並且注意他們如何滑動，你會明白我的意思。抱歉讓人困惑。 – Ilja

使用jQuery's .animate()功能：

$(document).ready(function() { 
    $("#trigger").click(function() { 
     $('#test').animate({ 
      opacity: 'toggle', 
      height: 'toggle' 
     }, "slow"); 
    }); 
});

這裏的a working fiddle。

其他資源：

如果你有興趣，這個網站有一些偉大的教程，這將幫助你熟悉jQuery的.animate()：http://vandelaydesign.com/blog/web-development/jquery-animation-tutorials/

來源

2011-11-03 11:49:40

是的，它淡入淡出，我不知道你是否注意到，但滑動功能改變，如果你把它比作小提琴我提供你可以看到他們是如何不同滑動。謝謝你的回答，但）） – Ilja

位遲到了，但我得到了它的工作：

http://jsfiddle.net/g7LwM/9/

別人一樣，用動畫做的高度和透明度的，但是我不知道你能撥動他們 - +1給其他人。

來源

2011-11-03 11:53:31 jammypeach

是的，它淡入淡出，我不知道你是否注意到，但滑動功能改變，如果你比較它提琴我提供你可以看到它們在滑動方面不同。謝謝你的回答））） – Ilja

鏈接函數非常方便，但對於動畫來說，它有點煩人，因爲它會按順序執行它們。

要同時淡入淡出，請使用animate()。

$('#element').animate({ opacity: 'toggle', height: 'toggle' }, "slow", callback_function);  
     or 
    The best thing you can do is to write your own animation for it, something in line with: 

    var slideDuration = 1000; 

     var slideInAnimation = {   
      opacity: 1,  
      height: 'toggle' 
     } 

     var slideOutAnimation = {  
      opacity: 0,  
      height: 'toggle' 
     } 

     $('#anotherDiv').hover(function() { 
      $('#myDiv').css("opacity", "0").animate(slideInAnimation, slideDuration); 
     }, function() { 
      $('#myDiv').animate(slideOutAnimation, slideDuration); 
     }); 

    more link: 
    http://api.jquery.com/animate/   
    http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html?lang=en

來源

2011-11-03 12:05:29

我不確定這是否是一個有效的方法....但它的工作....！

這裏是魔法：

HTML代碼：

<div id="frame"> 


<img src="image.jpg" /> 


</div>

在CSS：

設置display:none兩個「#frame」和「IMG」 ......

在JS中：

$(document).ready(function(){ 

    $("img").fadeIn(2000); 

    $("#frame").slideDown(1000); 

});

來源

2014-08-07 06:17:13

如何添加淡入淡出效果到以下jQuery幻燈片功能？

回答

相關問題