Home > Article > Web Front-end > jQuery implementation of prompt fade-in effect example tutorial

jQuery implementation of prompt fade-in effect example tutorial

小云云Original: 2018-01-12 11:28:061268browse

This article mainly introduces examples of using jquery to achieve the prompt fade-in effect, which has a good reference value. Let's take a look with the editor below, I hope it can help everyone.

Rendering:

Without further ado, please take a look at the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> jquery 提示语淡入</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
.tishi-com{display:none;width:65px;height:20px;line-height:20px; background:#fff9c9; border:1px solid #c7bf93; color:#666;
position:relative;left:230px;top:-22px;}
</style>
<script type="text/javascript" src="jquery-3.0.0.js"></script>
</head>
<body>
 <p style="width:500px;height:200px;border:1px solid #E5E5E5;margin:0 auto;">
  <p style="height:50px;width:100%;">
   <label class="user-label">用户名：</label>
   <input type="text" class="username" name="username"/>
   <p class="tishi-com">
    <span class="tishi-font font-12"></span>
   </p>
  </p>
 <p style="height:50px;width:100%;">
  <label class="user-label">手机号：</label>
  <input type="text" class="phone" name="phone"/>
  <p class="tishi-com">
   <span class="tishi-font font-12"></span>
  </p> 
 </p>
  <p>
  <input type="submit" class="fade" value="提交" />
  </p>
 </p>
<script type="text/javascript">
 $(document).ready(function(){
  $(".fade").click(function(){
   var name=$.trim($(".username").val());
   var phone=$.trim($(".phone").val());
   if(name==""){
    $(&#39;input[name=username]&#39;).siblings(&#39;.tishi-com&#39;).fadeIn();
    $(&#39;input[name=username]&#39;).siblings(&#39;.tishi-com&#39;).find(&#39;.tishi-font&#39;).text(&#39;不能为空&#39;);
   }
   if(phone==""){
    $(&#39;input[name=phone]&#39;).siblings(&#39;.tishi-com&#39;).fadeIn();
    $(&#39;input[name=phone]&#39;).siblings(&#39;.tishi-com&#39;).find(&#39;.tishi-font&#39;).text(&#39;不能为空&#39;);
   }
  });
 });
</script>
</body>
</html>

Related recommendations:

How to implement h5 normal text box prompts

h5 input box prompt language + normal text box prompt language implementation method

The above is the detailed content of jQuery implementation of prompt fade-in effect example tutorial. For more information, please follow other related articles on the PHP Chinese website!

jquery

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Simple implementation method of jQuery barrage effectNext article：Simple implementation method of jQuery barrage effect

See more

jQuery implementation of prompt fade-in effect example tutorial

Related articles