JQuery слайд к видимости скрыты? - PullRequest
Новая
       2

JQuery слайд к видимости скрыты?

3 голосов
/ 12 января 2012

Я хочу добиться чего-то вроде: 

$("#left").hide('slide', {direction: 'right'}, 1000)

Однако я не хочу, чтобы div был скрыт, я хочу, чтобы он занимал место, поэтому я хочу, чтобы видимость была скрыта как: 

$("#left").css('visibility','hidden')

И все же достигают того же эффекта, что и выше.

Ответы [ 3 ]

2 голосов
/ 12 января 2012

Это то, что я бы сделал 

$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible

Это может быть ужасно, но это единственный способ решить проблему:)

1 голос
/ 12 января 2012

ПРИМЕР: http://jsfiddle.net/skyrim/j2RWt/4

Попробуйте это: 

var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
    width: 0,
    position: "absolute",
    left: offset.left,
    top: offset.top,
    height: $content.outerHeight(),
    backgroundColor: "White"
}).appendTo("body")
.animate({
    width: $content.outerWidth()
}, 1000, function () {
    $content.css('visibility', 'hidden');
    $(this).remove();
});

РЕДАКТИРОВАТЬ

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

EDIT

Кажется, только Chromeпроблема с получением правильной высоты.

Добавлен обратный вызов, который удаляет скрытую видимость (как и предполагал LEOPiC) и удаляет выдвижной элемент div

0 голосов
/ 12 января 2012

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

$('#left').animate({width: 'toggle'});

ПРИМЕР: http://jsfiddle.net/2p3FK/2/

РЕДАКТИРОВАТЬ: Еще одно решение, это очень просто, чтобы вывести div из окна с помощью left margin

$("#left").animate({marginLeft:'1000px'},'slow');

ПРИМЕР: http://jsfiddle.net/2p3FK/1/

...