jquery
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-3.4.1.min.js"></script> <style> /*Changes cursor to a finger*/ #myspecial, #rebel{cursor:pointer;} #rebel {position:relative;left:0;} #mylogo{background:red; width:20px; webkit-transition:width 5s; transition:width 5s; font-size:20px;} #mylogo.expand{width:600px;} </style> <script> //opening jquery comm
$(document).ready( function(){ //process more functions $("mylogo").addClass("expand"); $("#mylogo").html("Yoo!2019"); $("mylogo").click( function(){ if($(this).hasClass("expand")){ $(this).removeClass("expand");} else{ $(this).addClass("expand"); } }); $("#myspecial").click( function(){ $("#mylogo").hide(); } ); //variable this changes the position. origin plus 10 var catX=0; var dir=50; $("#rebel").click( function(){ if(catX>500){ dir= -50; } if(catX<0){ dir = 50; } catX=catX+dir; $("#mylogo").show(); $(this).css( {left:catX +"px"} ); } ); } ); </script>
<title>jquery</title> </head>
<body> <h1 id="mylogo">Tomato</h1> <div id="myspecial"> <img src="../w7/logo.png" alt="H&M" width="200"/> </div> <div id="rebel">SHOW ME</div> </body> </html>