JQuery slideUp, чтобы показать элемент, а не скрывать

Ответ 1

$("div").click(function () {
      $(this).hide("slide", { direction: "down" }, 1000);
});

http://docs.jquery.com/UI/Effects/Slide

Ответ 2

Это немного сложнее, чем просто сказать slideUpShow() или что-то еще, но вы все равно можете это сделать. Это довольно простой пример, поэтому вы можете найти некоторые крайние регистры, которые нуждаются в адресе.

$("#show-animate-up").on("click", function () {
    var div = $("div:not(:visible)");

    var height = div.css({
        display: "block"
    }).height();

    div.css({
        overflow: "hidden",
        marginTop: height,
        height: 0
    }).animate({
        marginTop: 0,
        height: height
    }, 500, function () {
        $(this).css({
            display: "",
            overflow: "",
            height: "",
            marginTop: ""
        });
    });
});

Здесь сценарий, показывающий методы slideUp/slideDown, те же эффекты с использованием animate и измененная версия с использованием animate, которая идет обратным образом: http://jsfiddle.net/sd7zsyhe/1/

Так как animate является встроенной функцией jQuery, вам не нужно включать jQuery UI.

Ответ 3

Я нашел сложный способ...
вы можете установить div с дном css: 0px, добавить вызов
$("#div).slideDown();
будет отображаться с помощью эффекта slideUp-to-show, который вы хотите.

Ответ 4

Чтобы получить противоположность slideUp и slideDown. Добавьте эти две функции в jQuery.

$.fn.riseUp = function()   { $(this).show("slide", { direction: "down" }, 1000); }
$.fn.riseDown = function() { $(this).hide("slide", { direction: "down" }, 1000); }

Ответ 5

Jquery toggle

Этот эффект переключается только вверх и вниз. JQuery UI предназначен для любого другого направления

Ответ 6

Для тех, кто не использует JQuery UI, но хочет добавить эту функцию в библиотеку JQuery:

jQuery.fn.slideUpShow = function (time,callback) {
    if (!time)
        time = 200;
    var o = $(this[0]) // It your element

    if (o.is(':hidden'))
    {
        var height = o.css({
            display: "block"
        }).height();

        o.css({
            overflow: "hidden",
            marginTop: height,
            height: 0
        }).animate({
            marginTop: 0,
            height: height
        }, time, function () {
            $(this).css({
                display: "",
                overflow: "",
                height: "",
                marginTop: ""
            });
            if (callback)
                callback();
        });
    }

    return this; // This is needed so others can keep chaining off of this
};

jQuery.fn.slideDownHide = function (time,callback) {
    if (!time)
        time = 200;
    var o = $(this[0]) // It your element
    if (o.is(':visible')) {
        var height = o.height();

        o.css({
            overflow: "hidden",
            marginTop: 0,
            height: height
        }).animate({
            marginTop: height,
            height: 0
        }, time, function () {
            $(this).css({
                display: "none",
                overflow: "",
                height: "",
                marginTop: ""
            });
            if (callback)
                callback();
        });
    }

    return this;
}

Кредиты: @redbmk answer

Ответ 7

У меня есть несколько downvotes, поэтому я проверил свой ответ, и действительно, я не ответил правильно вопрос OP, извините. Поэтому я попытаюсь это исправить.

Во-первых, метод slideUp() в JQuery предназначен для скрытия элемента, а не для его раскрытия. В основном это противоположность slideDown(), которая показывает ваш элемент, сдвигая его вниз.

Зная, что я думаю, мы согласны с тем, что там нет волшебной функции, чтобы сделать эффект слайда, чтобы показать элемент (в JQuery).

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

https://coderwall.com/p/9dsvia/jquery-slideup-to-reveal

Решение выше работает с событием hover, для события click попробуйте этот модифицированный код:

http://jsfiddle.net/D7uT9/250/

Ответ, полученный @redbmk, также является рабочим решением.

Извините за свое непонимание в первый раз.

OLD ANSWER

Это старая статья, но если кто-то ищет решение, это моя рекомендация.

Теперь мы можем использовать slideToggle() для достижения этого эффекта (без использования jQuery UI).

$(".btn").click(function () {
      $("div").slideToggle();
});

Документация: http://api.jquery.com/slidetoggle/