jQueryのみ 拡張子:txtvbswsfjsphpjavahtmlutf8sjis <!-- Google から読み込み --> <script> if ( !window.jQuery ) { if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) { if ( window.addEventListener ) { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; } else { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; } } document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>"); } </script> <!-- ここから以下は http://api.jquery.com/animate/ --> <style> #block1,#block2 { background-color: #bca; width: 200px; height: 1.1em; text-align: center; border: 2px solid green; margin: 3px; font-size: 14px; } button { font-size: 14px; } </style> <button id="go1">» Animate Block1</button> <button id="go2">» Animate Block2</button> <button id="go3">» Animate Both</button> <button id="go4">» Reset</button> <div id="block1">Block1</div> <div id="block2">Block2</div> <script> $( "#go1" ).click(function() { $( "#block1" ) .animate({ width: "90%" }, { queue: false, duration: 3000 }) .animate({ fontSize: "24px" }, 1500 ) .animate({ borderRightWidth: "15px" }, 1500 ); }); $( "#go2" ).click(function() { $( "#block2" ) .animate({ width: "90%" }, 1000 ) .animate({ fontSize: "24px" }, 1000 ) .animate({ borderLeftWidth: "15px" }, 1000 ); }); $( "#go3" ).click(function() { $( "#go1" ).add( "#go2" ).click(); }); $( "#go4" ).click(function() { $( "#block1,#block2" ).css({ width: "", fontSize: "", borderWidth: "" }); }); </script> » Animate Block1» Animate Block2» Animate Both» ResetBlock1Block2
<!-- Google から読み込み --> <script> if ( !window.jQuery ) { if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) { if ( window.addEventListener ) { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; } else { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; } } document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>"); } </script> <!-- ここから以下は http://api.jquery.com/animate/ --> <style> #block1,#block2 { background-color: #bca; width: 200px; height: 1.1em; text-align: center; border: 2px solid green; margin: 3px; font-size: 14px; } button { font-size: 14px; } </style> <button id="go1">» Animate Block1</button> <button id="go2">» Animate Block2</button> <button id="go3">» Animate Both</button> <button id="go4">» Reset</button> <div id="block1">Block1</div> <div id="block2">Block2</div> <script> $( "#go1" ).click(function() { $( "#block1" ) .animate({ width: "90%" }, { queue: false, duration: 3000 }) .animate({ fontSize: "24px" }, 1500 ) .animate({ borderRightWidth: "15px" }, 1500 ); }); $( "#go2" ).click(function() { $( "#block2" ) .animate({ width: "90%" }, 1000 ) .animate({ fontSize: "24px" }, 1000 ) .animate({ borderLeftWidth: "15px" }, 1000 ); }); $( "#go3" ).click(function() { $( "#go1" ).add( "#go2" ).click(); }); $( "#go4" ).click(function() { $( "#block1,#block2" ).css({ width: "", fontSize: "", borderWidth: "" }); }); </script>
拡張子:txtvbswsfjsphpjavahtmlutf8sjis <!-- Google から読み込み --> <script> if ( !window.jQuery ) { if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) { if ( window.addEventListener ) { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; } else { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; } } document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>"); } if ( window[window.location.hostname+'.loadjQueryUI'] !== true ) { window[window.location.hostname+'.loadjQueryUI'] = true; if ( typeof window[window.location.hostname+'.loadjQueryUIcode'] === 'undefined' ) { window[window.location.hostname+'.loadjQueryUIcode'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'; window[window.location.hostname+'.loadjQueryUIcss'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css'; } document.write("<"+"link rel=\"stylesheet\" href=\""+ window[window.location.hostname+'.loadjQueryUIcss'] + "\">"); document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQueryUIcode'] + "\"></"+"script>"); } </script> <script> $(function(){ $( "#resizable" ).resizable(); }); </script> ▼ この画像の右と下をドラッグしてサイズ変更が可能です <img id="resizable" src="https://lh3.googleusercontent.com/-0Ky1fXjxmkw/UuO_njL9-rI/AAAAAAAASSM/IIg4YsrPqso/s600/1376593824552525.jpeg" style="border: solid 0px #000000"> ▼ この画像の右と下をドラッグしてサイズ変更が可能です
<!-- Google から読み込み --> <script> if ( !window.jQuery ) { if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) { if ( window.addEventListener ) { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js'; } else { window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'; } } document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>"); } if ( window[window.location.hostname+'.loadjQueryUI'] !== true ) { window[window.location.hostname+'.loadjQueryUI'] = true; if ( typeof window[window.location.hostname+'.loadjQueryUIcode'] === 'undefined' ) { window[window.location.hostname+'.loadjQueryUIcode'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'; window[window.location.hostname+'.loadjQueryUIcss'] = '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css'; } document.write("<"+"link rel=\"stylesheet\" href=\""+ window[window.location.hostname+'.loadjQueryUIcss'] + "\">"); document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQueryUIcode'] + "\"></"+"script>"); } </script> <script> $(function(){ $( "#resizable" ).resizable(); }); </script> ▼ この画像の右と下をドラッグしてサイズ変更が可能です <img id="resizable" src="https://lh3.googleusercontent.com/-0Ky1fXjxmkw/UuO_njL9-rI/AAAAAAAASSM/IIg4YsrPqso/s600/1376593824552525.jpeg" style="border: solid 0px #000000">