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

Question

我有这个幻灯片功能http://jsfiddle.net/g7LwM/1/

如何为它添加淡入淡出效果？ 因此，当它向下滑动时，它会淡入，而当向上滑动时，它会淡出？

重要提示：我注意到大多数答案都使用切换切换，这与我的幻灯片切换不同。 切换和滑动有不同的过渡！

Answer 1

使用jQuery的.animate()函数：

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

这是工作中的小提琴 。

其他资源：

如果您有兴趣，此站点上有一些很棒的教程，可以帮助您熟悉jQuery的.animate() ： http : .animate()

Answer 2

您需要设置动画： 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');

Answer 3

参加聚会有点晚，但我成功了：

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

与其他人一样，使用动画来设置高度和不透明度，但是我没有意识到您可以切换它们-为此，将其+1。

Answer 4

链接功能确实非常方便，但是对于动画而言，它有点烦人，因为它将按顺序执行它们。

要同时获得淡入淡出和滑动，请使用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

Answer 5

我不确定这是否是一种有效的方法。

这是魔术：

HTML代码：

<div id="frame">


<img src="image.jpg" />


</div>

在CSS中：

为“ #frame”和“ img”设置display:none 。...

在JS中：

$(document).ready(function(){

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

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

});