Question

如何为其添加淡入淡出效果？因此，当它向下滑动时，它会逐渐消失，当它向后滑动时会逐渐消失？

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

Answer 1

使用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/

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/

与其他人一样，使用animate来做高度和不透明度，但是我没有意识到你可以切换它们 - 为其他人+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 code：

<div id="frame">


<img src="image.jpg" />


</div>

在CSS中：

为＆＃34;＃frame＆＃34;设置display:none和＆＃34; img＆＃34; ....

在JS中：

$(document).ready(function(){

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

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

});

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

5 个答案: