как смягчить тумблер, чтобы переход выглядел мягче

Как я могу сделать переход переключения более мягким? Я "переключаю" 2 div:

$(document).ready(function(){

    var tweet = $("ul.tweets li");

    tweet.hover(function(){
        $(this).find('.a').toggle()
            .end().find('.b').toggle();
    });

});

это скрипта


toggle jquery fade
person Oterox    schedule 16.11.2011    source источник
comment
@BNL ... вы только что удалили термин «jQuery» из заголовка Q. А теперь скажи мне... ты используешь Google, верно? Когда вы ищете вопросы, связанные с jQuery... вы набираете "jQuery...", верно? Ну, вы только что «не помогли» многим пользователям, ищущим ответ на аналогичный вопрос (используя Google).   -  person Roko C. Buljan    schedule 16.11.2011
comment
На самом деле @roXon самый заметный тег будет добавлен к заголовку, поэтому он все равно будет отображаться как Jquery. Единственная проблема заключается в заголовке заголовка, по которому поисковые системы также имеют какой-то рейтинг.   -  person Shawn Mclean    schedule 16.11.2011
comment
@Шон. Да, я это знаю (в заголовке остается "jquery -..."). Не то, о чем я говорю. Меня беспокоит <h1>. Просто это «редактор должен стереть» набирает популярность. Через некоторое время будет трудно найти ответ, просматривая. Просто думаю. Возможно, я ошибаюсь, но я думаю, что в последнее время я в основном просматриваю браузер SO, а не гуглю.   -  person Roko C. Buljan    schedule 16.11.2011
comment
@roXon - рекомендация SO состоит в том, чтобы не помещать избыточные теги в заголовок, если только это не имеет смысла с точки зрения охвата. См. здесь: meta.stackexchange.com/questions/61059   -  person gilly3    schedule 16.11.2011
comment
@ gilly3 ... Я пытался просмотреть все комментарии и ответы, и никто не перестает обсуждать проблему, о которой я упоминал выше.   -  person Roko C. Buljan    schedule 16.11.2011
comment
@roXon - Ваше беспокойство, похоже, связано с SEO. Я думаю, что это не проблема. Доказательство в пудинге: google.com/search?q =jquery+fade+toggle+smooth+transition Уже лучший результат!   -  person gilly3    schedule 16.11.2011

Ответы (4)


arrow_upward
5
arrow_downward

Вы можете использовать .fadeToggle().

Изменить: если вы позиционируете абсолютно .b и относительно позиционируете li, вам нужно только переключить .b:

Рабочая демонстрация: http://jsfiddle.net/kpNY4/8/

tweet.hover(function () {
    $(".b", this).fadeToggle();
});

CSS:

li { position: relative; }
.b {
    display: none;
    background: #EEEEEE;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
person gilly3    schedule 16.11.2011
comment
это работает, но два div видны одновременно, поэтому, если они не имеют одинакового размера, это выглядит плохо. - person Oterox; 17.11.2011
comment
@Oterox - это можно исправить с помощью CSS. Я не могу решить эту проблему, не видя кода, который воспроизводит поведение. - person gilly3; 17.11.2011

arrow_upward
0
arrow_downward

Используйте методы fadeIn и fadeOut.

person Shomz    schedule 16.11.2011

arrow_upward
0
arrow_downward

Попробуйте скрыть и переключить:


tweet.hide('medium', function() {
 $(this).find('.a').toggle().end().find('.b').toggle();
});
person PhD    schedule 16.11.2011

arrow_upward
0
arrow_downward

jQuery fadeIn ( http://api.jquery.com/fadeIn/ ) и fadeOut ( http://api.jquery.com/fadeOut/ ) делает именно это.

person Filip    schedule 16.11.2011