English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home Page
  3. Experience Notes
  4. Main Content

A Brief Talk about jQuery Effect Functions

jQuery has many effects that can be implemented, such as fade in and fade out effects: <html>

 <head>
    <style>
      #box{width:200px;height:200px;background:red;opacity:1;}
    </style>
  </head>
  <body>
    <div id="box">
    </div>
    <input type="button" value="Hide"/Show "id="bt1">/><br>/>
    <input type="button" value="Fade in"id="bt2">/><br>/>
    <input type="button" value="Fade out"id="bt3">/><br>/>
    <input type="button" value="Slide in"id="bt4">/><br>/>
    <input type="button" value="Slide out"id="bt5">/><br>/>
    <input type="button" value="Semi-transparent"id="bt6">/><br>/>
    <input type="button" value="Slide in"/Slide out "id="bt7">/><br>/>
    <input type="button" value="Fade in"/Fade out "id="bt7">/><br>/>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $("function()
        $("#bt1").click(function(){
              $("#box").toggle()1000)
              }),
        $("#bt2").click(function(){
              $("#box").slideDown()1500)
              }),
        $("#bt3").click(function(){
              $("#box").slideUp()1500)
              }),
        $("#bt4").click(function(){
              $("#box").fadeIn()1000)
              }),
        $("#bt5").click(function(){
              $("#box").fadeOut()1000)
              }),
        $("#bt6").click(function(){
              $("#box").fadeTo()1500,0.4)
              }),
        $("#bt7").click(function(){
              $("#box").fadeToggle()1000)
              }),
        $("#bt8").click(function(){
              $("box").slideToggle()1500)
              )
        )
  </script>
</html>

jQuery can also implement a scrolling marquee effect, for example, the following example:<html>

<head>
    <style>
      #box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script>
    $("function()
        str="I am a Chinese person"
        $("#box").html(str)
        setInterval(go,300)
          function go(){
            str=str.substr(1)+str.substr(0,1)
            $("#box").html(str)
            }  
      )
  </script>
</html>

jQuery can be used to implement a delete function, for example:<html>

<head>
    <style>
      #box{
        width:400px;
        height:200px;
        border:1px solid black;
        }
    </style>
  </head>
  <body>
    <div id="box">
        <p id="a">First a</p>/p>
        <p>Second</p>/p>
        <p id="a">Third a</p>/p>
        <p>Fourth</p>/p>
    </div>
    <button id="del">Delete</button>/button>
    <button id="cle">Clear</button>/button>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $("function()
        $("#del").click(function(){}
            function(){}
              $("p").remove("#a")
              });
        $("#cle").click(function(){}
            function(){}
              $("#box").empty()
              });
      )
  </script>
</html>

jQuery will also implement a course selection function, for example:<html>

<head>
<title></title>
<style>
li{
  list-style:none;
}
#you{
  position:absolute;
  left:300px;
  top:10px;
}
ul{
  position:absolute;
  left:150px;
  top:10px;
}
</style>
<script src="jquery-1.6.js"></script>
<script>
  $("function()
    $("button:first").click(function(){
      $("#zuo>option:selected").prependTo($("#you"));
      //$("#you").append($("#zuo>option:selected");
    )
    $("button:eq(")1}).click(function(){
      $("#you>option:selected").appendTo($("#zuo"));
      //$("#you").append($("#zuo>option:selected");
    )
    $("button:eq(")2}).click(function(){
      $("#zuo>option").appendTo($("#you"));
    )
    $("button:eq(")3}).click(function(){
      $("#you>option").appendTo($("#zuo"));
    )
    $("button:eq(")4}).click(function(){
       //$("#zuo>option:first").before($("#zuo>option:selected"));
      $("#zuo>option:selected").prependTo($("#zuo"));
    )
    $("button:eq(")5}).click(function(){
      // $("#zuo>option:last").after($("#zuo>option:selected"));
      $("#zuo>option:selected").appendTo($("#zuo"));
    )
    $("button:eq(")6}).click(function(){
     $("#zuo>option:selected").prev().before($("#zuo>option:selected"));  
    )
    $("button:eq(")7}).click(function(){
     $("#zuo>option:selected").next().after($("#zuo>option:selected"));  
    )
  )
</script>
</head>
<body>
<select size="10" id="zuo" style="width:100px">
  <option>Professional English</option>
  <option>Advanced Mathematics</option>
  <option>University Chinese</option>
  <option>University Physics</option>
  <option>Computer Basics</option>
  <option>Basic Web Design</option>
  <option>C Language Programming</option>
  <option>Data Structure</option>
  <option>UI Design</option>
  <option>Product Script Design</option>
  <option>Product Script Improvement</option>
  <option>Product Script Practice</option>
</select>
<ul>
<li><button>Select</button></li>
<li><button>Unselect</button></li>
<li><button>Select All</button></li>
<li><button>Unselect All</button></li>
<li><button>Move to Top</button></li>
<li><button>Move to Bottom</button></li>
<li><button>Move Up</button></li>
<li><button>Move Down</button></li>
</ul>
<select size="10" id="you" style="width:100px">
</select>
</body>
</html>

jQuery can also implement the sliding panel function:<!DOCTYPE html

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $(".flip").click(function(){
  $(".panel").slideDown("slow");
 });
});
</script>
<style type="text}}/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - Leading Web technology tutorial site</p>
<p>In W3School, where you can find all the website construction tutorials you need.</p>
</div>
<p class="flip">Click here</p>
</body>
</html>
jQuery can implement simple animation effects: <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({left:'250px'});
 });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements are positioned statically and cannot be moved. If you want to manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery can implement the start and stop function of animation: <html>
  <head>
    <style>
      #box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}
    </style>
  </head>
  <body>
    <div id="box"></div>
    <button id="bt">Start</button>
    <button id="bt1">Stop</button>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $("function()
        $("#bt").click(function(){
              $("div").animate({left:"800px",top:"300px",width:"500px",height:"500px"},3000)
              }),
        $("#bt1").click(function(){
              $("div").stop();
              )      
        )
  </script>
</html>

jQuery can also be used to create upward scrolling image advertisement features: <html>

<head>
    <style>
      #box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}
      ul{list-style:none;}
      img{width:600px;height:300px;}
      *{padding:0;margin:0;}
    </style>
  </head>
  <body>
    <div id="box">
      <ul id="pic">
        <li><img src="1.png"></li>
        <li><img src="2.png"></li>
        <li><img src="3.png"></li>
        <li><img src="4.png"></li>
        <li><img src="1.png"></li>
      </ul>
    </div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script>
    $("function()
        m=0;
        p=setInterval(go,100)
        function go(){
            m+=20;
            $("#pic").css("margin-top",-m+"px")
            if(m>=1200){m=0}
            }
      )
  </script>
</html>

jQuery can achieve the effect of both expanding and closing dropdowns:<!DOCTYPE html>

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$("document").ready(function()
 {
 $("button").click(function(){
  $("#p1").css("color","red").slideUp(2000).slideDown(2000);
 });
});
</script>
</head>
<body>
<p id="p1">jQuery is full of fun!<//p>
<button>Click here</button>
</body>
</html>

That's all I share with you, thank you.

That's all the jQuery effect function that the editor shares with everyone. I hope it can provide a reference for everyone, and I also hope everyone will support and cheer for the Yell Tutorial.

Basic Tutorial
You May Also Like