Wednesday, 27 April 2022

jQuery Stop Animations

 1)juqery stop sliding effect:-


<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script> 

$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideDown(5000);

  });

  $("#stop").click(function(){

    $("#panel").stop();

  });

});

</script>

<style> 

#panel, #flip {

  padding: 5px;

  font-size: 18px;

  text-align: center;

  background-color: #555;

  color: white;

  border: solid 1px #666;

  border-radius: 3px;

}


#panel {

  padding: 50px;

  display: none;

}

</style>

</head>

<body>

 

<button id="stop">Stop sliding</button>


<div id="flip">Click to slide down panel</div>

<div id="panel">Hello world!</div>


</body>

</html>




No comments:

Post a Comment