Javascript Drop and Bounce Effect - PullRequest
Новая
       11

Javascript Drop and Bounce Effect

4 голосов
/ 19 февраля 2011

Мне не удается найти эффект javascript (jQuery или другой), который работает так, как я хочу. Я надеялся, что кто-нибудь может мне помочь.

Я работаю над проектом, в котором 3 блока контента обернуты в больший блок. Я подумываю о добавлении кнопки «Получить цитату» , которая возьмет больший окружающий div и уронит его, когда вы нажмете на кнопку «Получить цитату» (думаю, Скуби-ду (вытащите книгу из книжного шкафа и стена падает)) и она подпрыгивает при ударе, как будто она действительно имеет вес . Затем вернитесь назад после того, как пользователь заполнил форму «Получить предложение».

Я надеюсь, что это имеет немного смысла. Просто спросите, хотите ли вы получить разъяснения или хотите, чтобы я опубликовал набросок того, как это работает.

1 Ответ

10 голосов
/ 19 февраля 2011

Это уже доступная функция в пользовательском интерфейсе JQuery.http://jqueryui.com/demos/show/. Вот как вы это делаете 

<style type="text/css">
#mydiv{
    width:300px;
    height:300px;
    background:red;
    display:none;
    margin-top:30px;
}
</style>

<button>clickme</button>
<div id="mydiv"></div>

<script type="text/javascript">
$('button').click(function(){
    $('#mydiv').toggle('bounce',300)
});
</script>

Рабочий пример можно посмотреть на http://jsfiddle.net/TUFaw/

Я использовал переключатель, что означает, что если вы нажмете кнопку еще раз,эффект будет почитаться обратно, чтобы спрятать коробку.Вы можете использовать многие из доступных эффектов («слепой», «обрезать», «уронить», «взорвать», «согнуть», «выделить», «затянуть», «пульсировать», «встряхнуть», «скользить», «размер, масштаб»)включите необходимые файлы CSS и JS.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/start/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
...