All geek questions in one place

Javascript Drop and Drop Effect

I can not find javascript (jQuery or another) effect that works the way I want. I was hoping someone could help me.

I am working on a project that has 3 content fields wrapped in a large div. I'm thinking of adding a Get Quote button that will take a larger surrounding div and drop it when you click Get Quote (think scooby doo (pull a book out of a bookcase and wall)) and it bounces when it hits as if it actually has weight. Then go back after the user has filled out the "Get Quote" form.

Hope this makes little sense. Just ask if you want clarifications or want me to post a sketch of how this works.

+4
source share
1 answer

This is an already available feature in the jQuery user interface. http://jqueryui.com/demos/show/ . This is how you do it.

<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>

You can see a working example at http://jsfiddle.net/TUFaw/

I used toggle, which means that if you click on the button again, the effect will be read back to hide the field. You can use many available effects (blind, clip, drop, explosion, bend, highlight, puff, ripple, shake, slip, size, scale)

If you've never worked with jQuery before, make sure you include the necessary CSS and JS files.

 <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>
+10
source

Source: https://habr.com/ru/post/1340471/

More articles:


All Articles