06.- Jquery🌇 de 0 a 100 [Efectos]

Video: https://youtu.be/zWpOe8PKZq8
programadornovato · Jul 18, 2019 · f560424 · f560424
1 parent 8ad7d69
commit f560424
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -15,6 +15,14 @@
       <button type="button" class="btn btn-primary">pequeño</button>
       <button type="button" class="btn btn-primary">mover</button>
       <button type="button" class="btn btn-primary">desaparecer</button>
+      <button type="button" class="btn btn-success">hide</button>
+      <button type="button" class="btn btn-success">show</button>
+      <button type="button" class="btn btn-success">toggle</button>
+      <button type="button" class="btn btn-danger">fadeIn</button>
+      <button type="button" class="btn btn-danger">fadeOut</button>
+      <button type="button" class="btn btn-warning">slideDown</button>
+      <button type="button" class="btn btn-warning">slideUp</button>
+      <button type="button" class="btn btn-warning">slideToggle</button>
     </div>
     <div class="form-group">
       <input type="text" class="form-control" id="texto" placeholder="Coloca tu nombre">

diff --git a/javascript.js b/javascript.js
@@ -19,6 +19,38 @@ $(document).ready(function(){
         e.preventDefault();
         $('img').toggleClass('d-none');
     });
+    $('#subcontenedor button:nth-child(4)').click(function (e) { 
+        e.preventDefault();
+        $('img').hide('slow');
+    });
+    $('#subcontenedor button:nth-child(5)').click(function (e) { 
+        e.preventDefault();
+        $('img').show('fast');
+    });
+    $('#subcontenedor button:nth-child(6)').click(function (e) { 
+        e.preventDefault();
+        $('img').toggle(300);
+    });
+    $('#subcontenedor button:nth-child(7)').click(function (e) { 
+        e.preventDefault();
+        $('img').fadeIn(300);
+    });
+    $('#subcontenedor button:nth-child(8)').click(function (e) { 
+        e.preventDefault();
+        $('img').fadeOut(300);
+    });
+    $('#subcontenedor button:nth-child(9)').click(function (e) { 
+        e.preventDefault();
+        $('img').slideDown(300);
+    });
+    $('#subcontenedor button:nth-child(10)').click(function (e) { 
+        e.preventDefault();
+        $('img').slideUp(300);
+    });
+    $('#subcontenedor button:nth-child(11)').click(function (e) { 
+        e.preventDefault();
+        $('img').slideToggle(300);
+    });
     let textoUI=$('#texto');
     textoUI.keyup(function (e) { 
         e.preventDefault();