Beispiel-Tutorial zur jQuery-Implementierung des Prompt-Fade-In-Effekts-js-Tutorial-php.cn

Beispiel-Tutorial zur jQuery-Implementierung des Prompt-Fade-In-Effekts

小云云

Freigeben： 2018-01-12 11:28:06

Original

1333 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich Beispiele für die Verwendung von JQuery zur Erzielung des sofortigen Einblendeffekts vorgestellt, der einen guten Referenzwert hat. Werfen wir einen Blick mit dem untenstehenden Editor. Ich hoffe, er kann allen helfen.

Rendering:

Werfen Sie ohne weitere Umschweife einen Blick auf den 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>

Nach dem Login kopieren

Verwandte Empfehlungen:

So implementieren Sie normale H5-Textfeld-Eingabeaufforderungen

Empfohlene Zusammenfassung der 10 Eingabeaufforderungs-Quellcodes (Sammlungen)

So implementieren Sie die H5-Eingabefeld-Eingabeaufforderung + die normale Textfeld-Eingabeaufforderung

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur jQuery-Implementierung des Prompt-Fade-In-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!