Можно ли сдвинуть переключатель div с помощью Easing и установить минимальную высоту?

Question

У меня есть div, который разворачивается и расширяется с помощью slideToggle и easing.

$('button').click(function () {
    $('div').slideToggle('2000', "easeOutBounce");
});

Я хочу, чтобы когда слайд «Вверх» имел минимальную высоту, чтобы его всегда можно было увидеть в небольшом объеме.

Таким образом, когда он скользит вниз, имеет height:(div height) и slideUp, height:10px;

Обратите внимание, что div может иметь любую высоту, поэтому я не использую анимацию.

Answer 1

Лучшее, что я мог придумать, это следующее:

var toggleMinHeight = 30,
    duration = 2000,
    easing = 'swing';
$('.toggles').each(
    function(){
        $(this).attr('data-height',$(this).height());
    }).click(
    function(){
        var curH = $(this).height();
        if ($(this).is(':animated')){
            return false;
        }
        else if (curH == $(this).attr('data-height')) {
            $(this).animate(
                {
                    'height' : toggleMinHeight
                }, duration, easing);
        }
        else if (curH == toggleMinHeight){
            $(this).animate(
                {
                    'height' : $(this).attr('data-height')
                }, duration, easing);
        }
    });

Демонстрация JS Fiddle .

Однако у этой демонстрации есть некоторые проблемы:

• Никаких функций ослабления сверх той, которая указана в базовой библиотеке jQuery (предоставляя доступ к 'swing' и 'linear'), это можно улучшить, добавив пользовательский интерфейс jQuery.
• Это может почтибезусловно, его нужно превратить в плагин, чтобы на него было не так просто смотреть.
• Требуется большой, функциональный, но не симпатичный оператор if / else if.
• Требуется вхотя бы один проход each(), чтобы назначить 'default' / 'естественную' высоту элементов div.
• Если div s не position: absolute, они уменьшаются до базовой линиивстроенные элементы (так как они display: inline-block), это не может быть проблемой, если они float: left (или float: right, очевидно).

Надеемся, что это полезно,но это, конечно, не идеально в своем нынешнем состоянии.

Отредактировано для публикации версии вышеупомянутого плагина (в ней сохраняются все те же проблемы, что и раньше):

(function($) {

    $.fn.slideTo = function(slideToMin, duration, easing) {

        var slideToMin = slideToMin || 30,
            duration = duration || 500,
            easing = easing || 'linear';
        $(this)
            .attr('data-height', $(this).height())
            .click(
                function() {
                    var curH = $(this).height();
                    if ($(this).is(':animated')) {
                        return false;
                    }
                    else if (curH == $(this).attr('data-height')) {
                        $(this).animate({
                            'height': slideToMin 
                        }, duration, easing);
                    }
                    else if (curH == slideToMin) {
                        $(this).animate({
                            'height': $(this).attr('data-height')
                        }, duration, easing);
                    }
                });

        return $(this);
    };
})(jQuery);

$('.toggles').slideTo(50,1500,'swing');

Демонстрация JS Fiddle .

1. slideToMin: это может быть или строка в кавычках, такая как «3em», «20px», или число без кавычек, такое как 30, и представляет высотук которому вы хотите, чтобы элемент скользил к.Если единицы измерения не указаны, то высота по умолчанию считается в пикселях.
2. duration: количество миллисекунд, в течение которых сохраняется анимация.
3. замедление: aстрока в кавычках, определяющая тип замедления для использования в анимации;без jQuery UI это либо «линейный», либо «колебательный». С jQuery UI возможны другие варианты, но это не проверено.Если не указано, для анимации по умолчанию используется значение linear. Поскольку использование единиц в строке в кавычках приводит к тому, что конечный else if возвращает значение false (очевидно, я полагаю ... вздох), используйте только числовой аргумент без кавычек для этой переменной.(или отредактируйте плагин, чтобы правильно обрабатывать строки в кавычках с единицами ...).

Более крупная проблема, которую я не осознавал, пока не опубликовал это, заключается в том, что версия плагина позволяет только одна итерация анимации.Что меня смущает, хотя, возможно, это очевидно для кого-то еще?

Хорошо, похоже, это оценка высоты в выражении if.Использование 3em привело к тому, что final else if: curH == toggleMinHeight вернул false.Предположительно из-за наличия единицы (em) в этой переменной.Приведенное выше руководство было отредактировано, чтобы отразить, что следует использовать единицы , а не .

Ссылки:

• animate().
• :animated селектор .
• attr().
• click().
• each().
• height().
• is().

Answer 2

Предлагаю вам сыграть хитро;

почему у вас нет div над скользящим div, который имеет такую ​​же ширину и цвет, чтобы он всегда отображался и отображался как часть скользящей части

Answer 3

Не совсем.Когда вызывается метод slide, он получает свойство стиля

display: none;

Однако вы можете динамически исправить его, используя функцию обратного вызова

$('div').slideToggle('2000', "easeOutBounce", function() {
     $('div')[0].style.height="//whatever//"     //You could also use the min-height property
     $('div')[0].style.display="inline";
);

В чем именно заключается проблемас анимацией?