Выдвиньте div/изображение частично с помощью JQuery

Столкнулся с проблемой, которую не могу решить самостоятельно:

У меня есть div с фоновым изображением, которое я хочу переключать слайдом вверх/вниз при нажатии на div. Проблема в том, что изображение всегда полностью (100%) скользит вверх, поэтому его нет. Я хочу, чтобы он оставался снаружи на 20%, чтобы вы могли щелкнуть по нему, и он снова соскользнет на 100%.

Я попробовал .animate(), но он меняет соотношение сторон изображения, и тогда он не выскользнет.

Я проверил такие решения, как http://spoonfedproject.com/jquery/jquery-slide-with-minimum-height/ где элементы div скользят внутрь/вне, но не имеют фонового изображения...

У кого-нибудь есть идея? Я был бы очень признателен!

JS-скрипт: http://jsfiddle.net/JmLqp/105/

HTML-код

<div id="contact"></div>

CSS-код

#contact{
 width:162px;
 height:336px;
 background: url(http://s18.postimage.org/kl4b1rly1/bg_contact.png) no-repeat;
}

JS-код

$("#contact").click(function () {
  $(this).hide("slide", {direction: "up"}, 1000);
});

html jquery slide slidetoggle jquery-effects
person Commander-Ape    schedule 02.02.2013    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Вы были на правильном пути с animate():

$("#contact").css('position', 'relative').click(function () {
    if($(this).offset().top == -250) {
         $(this).animate({'top': '0px'}, 1000);
    }
    else {
         $(this).animate({'top': '-250px'}, 1000);
    }
});

Обратите внимание, что вы должны установить position на relative для себя, как указано выше.

Рабочая скрипта

person leftclickben    schedule 02.02.2013
comment
О, кстати, это не соскальзывает обратно вниз. Для этого вы, вероятно, захотите сохранить флаг и animate свойство top либо в -250px, либо в 0 по мере необходимости. - person leftclickben; 02.02.2013
comment
@Aspiring Aqib: Ну, я сказал, что он не соскальзывает обратно. Вопрос был в том, чтобы он выдвигался полностью, а не только большую часть, а не в том, чтобы он двигался одновременно вверх и вниз, поэтому я решил придерживаться основного вопроса. - person leftclickben; 02.02.2013
comment
Гипер? Нет, просто объясняю, почему я сделал только то, что сделал :-) - person leftclickben; 02.02.2013
comment
Как я могу добиться того же в своем вопросе: stackoverflow.com/questions/28132970/ Спасибо. - person Si8; 25.01.2015

arrow_upward
0
arrow_downward

Просто установите position: relative в свой анимированный div, см. рабочий jsfiddle

#contact{
    position:relative;
    width:162px;
    height:336px;
    background: url(http://s18.postimage.org/kl4b1rly1/bg_contact.png) no-repeat;

}

$("#contact").click(function () {
    tp = $(this).css('top') == '0px' ? '-270px' : '0px';
    $(this).animate( {top: tp }, 1000);
});

ОБНОВЛЕНИЕ:
Я также обновил свой jsfiddle, чтобы он работал как вверх, так и вниз, это было незначительное дополнение.

person Nelson    schedule 02.02.2013