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

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

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

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


javascript animation jquery fade
person Ilja    schedule 03.11.2011    source источник

Ответы (5)


arrow_upward
3
arrow_downward

Вам нужна анимация: 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');
person Manse    schedule 03.11.2011
comment
Да, он появляется и исчезает, я не знаю, заметили ли вы, но функция скольжения изменилась, если вы сравните ее со скрипкой, которую я предоставил, вы можете увидеть, чем они отличаются в скольжении. Хотя спасибо за ответ)) - person Ilja; 03.11.2011
comment
@IlyaKnaup Как это изменилось? ответ по-прежнему делает то же самое, что и ваш JSFiddle, но исчезает .... это то, что вы задали в вопросе? - person Manse; 03.11.2011
comment
Да, извините за путаницу, в моем примере логотип Google скользит сверху вниз, где, как в вашей скрипке, он отображается. Ван, ты понимаешь, что я имею в виду? Если вы сравните обе скрипки и обратите внимание на то, как они скользят, вы поймете, что я имею в виду. Извините за путаницу. - person Ilja; 03.11.2011
comment
О, я думаю, что заметил разницу, в вашем примере используется переключатель, а в моем — слайд, у них разные эффекты перехода, это я и имел в виду. - person Ilja; 03.11.2011
comment
@IlyaKnaup действительно скользит, комбинация высоты: переключатель и продолжительность делают слайд - person Manse; 03.11.2011
comment
Он скользит по-другому, просто сравните jsfiddle.net/g7LwM/1 с jsfiddle.net/manseuk/g7LwM/7 и внимательно посмотрите на переход. Первый падает сверху, а второй отображается. - person Ilja; 03.11.2011
comment
@IlyaKnaup скользит, но продолжительность составляет 600 мс — по умолчанию — если вы увеличиваете продолжительность, то слайд становится более очевидным —> jsfiddle.net/manseuk/g7LwM/10 - person Manse; 03.11.2011
comment
;D ох, чувак, мне очень жаль, что я такой, я поместил их обоих здесь jsfiddle.net/g7LwM/12 обратите внимание на то, как они действуют. Теперь вы видите разницу? - person Ilja; 03.11.2011
comment
@IlyaKnaup я вижу, что твои слайды, мои слайды и исчезают .... это то, о чем ты просил ?? если это не так, проигнорируйте мой ответ и обновите свой вопрос, чтобы предоставить лучшее объяснение - person Manse; 03.11.2011

arrow_upward
3
arrow_downward

Используйте функцию jQuery .animate():

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

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

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

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

person James Hill    schedule 03.11.2011
comment
Да, он появляется и исчезает, я не знаю, заметили ли вы, но функция скольжения изменилась, если вы сравните ее со скрипкой, которую я предоставил, вы можете увидеть, чем они отличаются в скольжении. Хотя спасибо за ответ)) - person Ilja; 03.11.2011

arrow_upward
1
arrow_downward

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

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

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

person totallyNotLizards    schedule 03.11.2011
comment
Да, он появляется и исчезает, я не знаю, заметили ли вы, но функция скольжения изменилась, если вы сравните ее со скрипкой, которую я предоставил, вы можете увидеть, чем они отличаются в скольжении. Хотя спасибо за ответ)) - person Ilja; 03.11.2011

arrow_upward
1
arrow_downward

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

Чтобы добиться одновременного затухания и скольжения, используйте 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
person Hemant Menaria    schedule 03.11.2011

arrow_upward
0
arrow_downward

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

Вот волшебство:

HTML-код:

<div id="frame">


<img src="image.jpg" />


</div>

В CSS:

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

In JS:

$(document).ready(function(){

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

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

});
person Pravin Ajaaz    schedule 07.08.2014