jquery實(shí)現(xiàn)提示語淡入效果

更新時間：2017年05月05日 17:01:29 作者：yangzailu1990

本篇文章主要介紹了jquery實(shí)現(xiàn)提示語淡入效果的實(shí)例，具有很好的參考價值。下面跟著小編一起來看下吧

效果圖：

話不多說，請看代碼：

<!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>
 <div style="width:500px;height:200px;border:1px solid #E5E5E5;margin:0 auto;">
  <div style="height:50px;width:100%;">
   <label class="user-label">用戶名：</label>
   <input type="text" class="username" name="username"/>
   <div class="tishi-com">
    <span class="tishi-font font-12"></span>
   </div>
  </div>

 <div style="height:50px;width:100%;">
  <label class="user-label">手機(jī)號：</label>
  <input type="text" class="phone" name="phone"/>
  <div class="tishi-com">
   <span class="tishi-font font-12"></span>
  </div> 
 </div>

  <div>
  <input type="submit" class="fade" value="提交" />
  </div>
 </div>

<script type="text/javascript">
 $(document).ready(function(){
  $(".fade").click(function(){
   var name=$.trim($(".username").val());
   var phone=$.trim($(".phone").val());
   if(name==""){
    $('input[name=username]').siblings('.tishi-com').fadeIn();
    $('input[name=username]').siblings('.tishi-com').find('.tishi-font').text('不能為空');
   }
   if(phone==""){
    $('input[name=phone]').siblings('.tishi-com').fadeIn();
    $('input[name=phone]').siblings('.tishi-com').find('.tishi-font').text('不能為空');
   }
  });
 });
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法,實(shí)例分析了jQuery動態(tài)顯示特效的使用技巧,需要的朋友可以參考下
2015-03-03
JQuery 兩種方法解決剛創(chuàng)建的元素遍歷不到的問題
本文主要介紹兩種方法，處理JQuery遍歷剛創(chuàng)建的元素問題，簡單易用，希望能幫到大家。
2016-04-04
jQuery插件bxSlider實(shí)現(xiàn)響應(yīng)式焦點(diǎn)圖
bxSlider特性1.充分響應(yīng)各種設(shè)備，適應(yīng)各種屏幕；2.支持多種滑動模式，水平、垂直以及淡入淡出效果；3.支持圖片、視頻以及任意html內(nèi)容；4.支持觸摸滑動；5.支持Firefox，Chrome，Safari，iOS，Android，IE7+，下面我們就來詳細(xì)探討下吧。
2015-04-04
jQuery on()方法示例及jquery on()方法的優(yōu)點(diǎn)
使用jquery on()方法綁定事件是官方推薦的一種方法，接下來跟著小編來學(xué)習(xí)jquery on()方法，小伙伴快來一起學(xué)習(xí)吧
2015-08-08
jQuery獲取單擊節(jié)點(diǎn)對象的方法
這篇文章主要介紹了jQuery獲取單擊節(jié)點(diǎn)對象的方法,涉及jQuery操作鼠標(biāo)事件與頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
javascript與jquery中跳出循環(huán)的區(qū)別總結(jié)
本文是對javascript與jquery中跳出循環(huán)的區(qū)別進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
jQuery實(shí)現(xiàn)圖片信息的浮動顯示實(shí)例代碼
圖片信息的浮動顯示的效果，在網(wǎng)頁應(yīng)用中還是比較流行的，下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，喜歡的朋友可以參考下
2013-08-08
jQuery+jsp實(shí)現(xiàn)省市縣三級聯(lián)動效果(附源碼)
這篇文章主要介紹了jQuery+jsp實(shí)現(xiàn)省市縣三級聯(lián)動效果,以完整實(shí)例形式分析了jQuery結(jié)合jsp讀取MySQL數(shù)據(jù)庫操作實(shí)現(xiàn)省市縣三級聯(lián)動效果的相關(guān)技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下
2015-12-12
jQuery實(shí)現(xiàn)簡單滾動動畫效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單滾動動畫效果的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-04
基于jQuery Ajax實(shí)現(xiàn)上傳文件
這篇文章主要為大家詳細(xì)介紹了jQuery Ajax上傳文件的相關(guān)代碼,需要的朋友可以參考下
2016-03-03