Как сместить div из верхнего правого угла с помощью jquery?

У меня есть скрытые divs и, когда нажата кнопка, я хочу показать div.Как сместить div из верхнего правого угла с помощью jquery?

Я видел slideDown, но это не совсем то, что я хочу. Я хочу, чтобы скрытый div рос от ничего до его первоначального размера и делал это из верхнего правого угла (скрытого) div.

источник

2013-05-24 Martijn

Использовать fadeIn вместо слайд вниз –

возможно анимация? http://api.jquery.com/animate/ Можете ли вы опубликовать какой-то код с тем, что вы пробовали до сих пор, чтобы мы могли помочь? – 97ldave

$("#box").show('size', { origin: ["top", "right"] }, 2000);

Использование .toggle() с теми же параметрами, вместо этого, если вы хотите быть в состоянии скрыть это с тем же событием.

Первый параметр - эффект, который мы используем, size. Второй параметр - объект опций, специфичных для этого эффекта, из которых мы используем только origin, чтобы указать, с чего он должен измениться. Третий параметр - это продолжительность в миллисекундах, которую вы можете изменить в свободное время.

Живой пример: http://jsbin.com/uwonun/1

источник

2013-05-24 09:12:07

Спасибо, вот оно! – Martijn

Это не совсем то, что вы хотите, но это может быть может быть изменен:

Вы можете использовать метод JQuery UI .effect на погружения с параметром "size". Это настраивается в настройках, и вы должны быть в состоянии работать, как здесь:

http://jqueryui.com/effect/

удачи, и я надеюсь, что это помогает!

источник

2013-05-24 09:08:32 samdy1

Попробуйте один

<html> 
    <head> 
     <style type="text/css"> 
      #slideDiv{display:none;width:400px;height:300px;position:absolute;top:0;right:0;background:#ff0000;color:#fff;} 
     </style> 
    </head> 
    <body> 
     <div id="slideDiv"> </div> 
     <button id="startSlide">Start Slide</button> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(function(){ 
       $('#startSlide').on('click', function(){ 
        $('#slideDiv').toggle('slow', function() { }); 
       }) 
      }) 
     </script> 
    </body> 
</html>

Я надеюсь, что это помогает.

источник

2013-05-24 09:11:56 Mahesh

растет от нуля до исходного размера и делает это в правом верхнем углу (скрытой) дел.

я думаю, что тумблер делает то, что вам нужно ...

попробовать этот

HTML

<div id="test"></div> 
<button id="button">click</button>

JQuery

$(function(){ 
    $("#button").click(function(){ 
     $('#test').toggle('slow'); 
}); 
});

если упаковывают вам не нужна какая-либо анимация во второй мыши, то вы можете использовать one()

$(function(){ 
    $("#button").one('click',function(){ 
     $('#test').toggle('slow'); 
}); 
});

fiddle here

источник

2013-05-24 09:16:43 bipen

Это действительно тот эффект, который я хочу, но он отображает div из верхнего левого угла вместо верхнего правого угла. – Martijn

Не уверены, если это хак. Но, я обнаружил, что я получил то, что я (и вы) хотите без JQuery UI (и я удалил библиотеку непосредственно из моего YEOMAN/беседки сборки):

var isLeft = !$myRelorAbsDiv.position().left; // 2-col layout, with floated divs 
$myRelorAbsDiv.css(isLeft? "left":"right", 0).show("slow");

В 2-х цв (на основе ширины контейнера только...все внутренние divs просто поплыли влево) макет, приведенный выше код вызывает (из-за позиционирования css перед вызовом метода show) анимация должна происходить справа, когда в правом столбце (левая анимация, если слева, 1-й столбец). Я почти привез в jquery-ui, чтобы сделать это! blah :)

источник

2013-10-04 07:38:58

Кстати, сначала вам нужно показать() ваш скрытый div, раскладка. –

Кроме того, протестирован с jQuery 1.9 во всех браузерах до IE8. Работает одинаково. –

Как сместить div из верхнего правого угла с помощью jquery?

ответ

Смежные вопросы