Как добавить эффект затухания в следующую функцию слайдера jQuery?

Question

У меня есть эта функция слайд http://jsfiddle.net/g7LwM/1/

Как добавить к нему эффект затухания? Так, когда он скользит вниз, он исчезает, а когда он скользит вверх, он исчезает?

Важно: Я заметил, что в большинстве ответов используется тумблерный переход, он отличается от слайд-перехода, который у меня есть. Переключение и скольжение имеют разные переходы!

Answer 1

Вам нужна анимация: 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 2

Использование Функция jQuery .animate():

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

Вот рабочая скрипка .

Дополнительные ресурсы:

Если вам интересно, на этом сайте есть несколько отличных учебных пособий, которые помогут вам ознакомиться с jQuery .animate(): http://vandelaydesign.com/blog/web-development/jquery-animation-tutorials/

Answer 3

Цепные функции действительно удобны, но когда дело доходит до анимации, это немного раздражает, потому что они будут выполнять их по порядку.

Чтобы одновременно исчезать и скользить, используйте 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 4

Немного опоздал на вечеринку, но у меня все получилось:

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

То же, что и у других, используйте animate для высоты и непрозрачности, однако я не понимал, что вы можете переключатьсяих - +1 к остальным за это.

Answer 5

Я не уверен, что это эффективный способ .... но он работает .... !!

Вот магия:

HTML-код:

<div id="frame">


<img src="image.jpg" />


</div>

В CSS:

установить display:none для "#frame" и "img" ....

В JS:

$(document).ready(function(){

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

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

});