Можливості бібліотеки jQuery

Головна "Best"

Корисні сайти jQuery:
Розробники бібліотеки jQuery.com





   

Елементи бібліотеки jQuery

    Підключаємо бібліотеку jQuery, від розробників http://jquery.com/download/ , останню версію на момент написання сторінки (квітень 2014)

< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">
</script>




Приклади анімації з використанням бібліотеки jQuery



    Елемент бібліотеки jQuery .animate({opacity: 0.5,left: "+=50", height: "toggle" }, 5000);






<input id="st025_but03" type="button" value="Запустити анімацію" > 

<div class="st025_zone_show">
<img id="picture01" src="img01.jpg"    style="position: relative; left: 10px; top:10px">
 </div>

<script >
$(document).ready(function(){
  $( "#clickme" ).click(function() {
  $( "#picture" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});
});
</script>



    Елемент бібліотеки jQuery .hide() , .show()







<input id="st025_but06" type="button" value="Приховати картинку" />
<input id="st025_but07" type="button" value="Показати картинку" />

<div class="st025_zone_show">
<img id="picture02" src="img01.jpg"    style="position: relative; left: 10px; top:10px">
 </div>


<script>
<script type="text/javascript"> 
// With the element initially shown, we can hide it slowly:
$( "#st025_but06" ).click(function() { 
  $( "#picture02" ).hide( 5000);       
});                                    
$( "#st025_but07" ).click(function() {  
  $( "#picture02" ).show( 5000);        
});                                     
</script>                         



    Елемент бібліотеки jQuery     .addClass(),    .animate({height:280},2000),    .animate({width:400},2000),    .animate({padding:20},2000)

   The studio was filled with the rich odour of roses, and when the light summer wind stirred amidst.

   As the painter looked at the gracious and comely form he had so skilfully mirrored in his art, a smile of pleasure passed across his face, and seemed about to linger there.
   But he suddenly started up, and closing his eyes, placed his fingers upon the lids, as though he sought to imprison within his brain some curious dream from which he feared he might awake.
   “It is your best work, Basil, the best thing you have ever done,” said Lord Henry languidly. “You must certainly send it next year to the Grosvenor.






<input id="st025_but010" type="button" value="Розпочати анімацію" />


<div id="st025_wrap1">
<p id="st025_text1">   The studio was filled with the rich odour of roses, 
and when the light summer wind stirred amidst.</p>
<div id="st025_text2">
<p>    As the painter looked at the gracious and comely form he had so 
skilfully mirrored in his art, a smile of pleasure passed across his face, 
and seemed about to linger there. 
   But he suddenly started up, and closing his eyes, placed his fingers upon the lids, as though he sought to imprison within his brain some curious dream from which he feared he might awake.
   “It is your best work, Basil, the best thing you have ever done,” said Lord Henry languidly. “You must certainly send it next year to the Grosvenor.</p> </div> <script> $(document).ready(function(){ $("#st025_but010").click(function(){ $("#st025_wrap1").addClass("st025_01"); $("#st025_wrap1").animate({height:280},2000); $("#st025_wrap1").animate({width:400},2000); $("#st025_wrap1").animate({padding:20},2000,function(){ $("#st025_text1").hide(2000,function(){ $("#st025_text2").show(2000);}); }); $("#st025_wrap1").animate({width:800},2000); }); }); </script>


    Елемент бібліотеки jQuery     .animate({height:110},2000);    .animate({width:110},2000);





<input id="st025_but015" type="button" value="Розпочати анімацію" />

<img  src="img04.png" id="picture05"  alt="" width="225px" height="225px" >

<script type="text/javascript">
$(document).ready(function(){
      $("#st025_but015").click(function(){
      $("#picture05").animate({height:110},2000);
      $("#picture05").animate({height:225},2000);
      $("#picture05").animate({width:110},2000);
      $("#picture05").animate({width:225},2000);
       });
});                      
</script>                         



    Елемент бібліотеки jQuery     .fadeTo(3000,0.3)







<input id="st025_but018" type="button" value="Повільно зникае до 0.3" />
<input id="st025_but019" type="button" value="Повільно зявляється до 0.9"/>

<img  src="img04.png" id="picture06"  alt="" width="225px" height="225px" >

<script type="text/javascript">
$(document).ready(function(){
   $("#st025_but016").click(function(){ $("#picture06").fadeTo(3000,0.3)});
   $("#st025_but017").click(function(){ $("#picture06").fadeTo(3000,0.9)});
});                      
</script>                         



    Елемент бібліотеки jQuery     .slideUp()     slideDown( )







<input id="st025_but22" type="button" value="Сховати картинку" />
<input id="st025_but23" type="button" value="Показати картинку" />

<img  src="img05.jpg" id="picture07"  alt="" width="400px" height="300px" >

<script type="text/javascript">
$(document).ready(function(){
   $("#st025_but03").click(function(){ $("#picture07").slideUp(3000)});
   $("#st025_but04").click(function(){ $("#picture07").slideDown(3000)});
});                      
</script>                         



    Елемент бібліотеки jQuery     .animate({ "left": "+=200px" }, 5000 );




<button id="st025_but26">Вліво </button>
<button id="st025_but27">Вправо </button>
<button id="st025_but28">Вверх </button>
<button id="st025_but29">Вниз </button>
<button id="st025_but30">Вправо та вниз </button>

<img  src="img05.jpg" id="picture07"  alt="" width="400px" height="300px" >

<script type="text/javascript">
$( "#st025_but26" ).click(function(){
  $( "#picture08" ).animate({ "left": "-=100px" }, 1000 );
});
$( "#st025_but27" ).click(function() {
  $( "#picture08" ).animate({ "left": "+=100px" }, 1000 );
});
$( "#st025_but28" ).click(function(){
  $( "#picture08" ).animate({ "top": "-=100px" }, 1000 );
});
$( "#st025_but29" ).click(function(){
  $( "#picture08" ).animate({ "top": "+=100px" }, 1000 );
});
$( "#st025_but30" ).click(function() {
  $( "#picture08" ).animate({ "left": "+=100px","top": "+=100px" }, 1000 );
});                      
</script>