jquery implementation IE6 fade-out hint function effect instance

In this paper, we introduce jquery to achieve compatible IE6 fade effect alarm function, combined with specific examples to analyze the jquery pop-up warning function of the specific implementation steps and related operation skills, the need for friends can refer to, hope to help everyone.

In fact, I think the alarm prompt, directly with an alert on the best. Straight to the point, directly let the user understand the meaning of your current system, the key is alert this thing is again broken browser must be compatible, or you do it do Mao browser ah? However, now more and more feel alert is not beautiful, and began to have "the window is very scary" trend of thought, therefore, the alarm prompted you must do a good job. The simple fade-out effect of jquery is your choice, as the transparency of JavaScript is tricky to manipulate. jquery was chosen because it was well-compatible with IE6.

I. BASIC OBJECTIVES

When the input box's input character number is greater than 10 for both Chinese and English. Pop-up alarm, the specific effect is as follows, in the Ietest IE6 environment test pass.

Second, HTML layout

The P layout is used here, and the table layout is not used. The specific float arrangement, you can refer to the "P+CSS Web page production layout skills learning", here is not much to say, very simple:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
This is, I hope you notice, this alarm function is triggered by the onchange of a multiline text box, and when triggered, passes itself to that function. At the same time the alarm text has been set, but initially in a hidden state.

Also note that the heading introduces jquery.

Third, jquery script

Instead of using the FadeTo0 to write the most basic fade-out effect, it is shown with show () and hide () because the show () and hide () do not fade in effect. and Fadein and fadeout will occur the shift of text, not good-looking.



<script>function Errtipsalert (obj) {//obj passes itself over if the contents of the multiline text box are more than 10 characters if (obj.value.length>10) {  // Then the error message text errmsg the first in 1 seconds, the transparency from 0 to 1, and then within 1 seconds, the transparency from 1 to 0, and then the same way back, so as to achieve the flashing hint fade.  $ ("#errMsg"). FadeTo (1000,1). FadeTo (1000,0). FadeTo (1000,1);  Then the border of the multiline text box is bold, red  $ (obj). css ("Border", "2px solid #ff0000");} else{  //Otherwise the error message text errmsg becomes 0 transparent in 1 milliseconds, equivalent to hide () method, but hide () will shift in some cases.  $ ("#errMsg"). FadeTo (1,0);  Restores the border $ (obj) of a multiline text box  . CSS ("Border", "1px solid #cccccc");}} </script>
The multiline text box does not animate. Although you can animate the BorderWidth property like the jquery loop animation and how to get the component size, this animation is very jammed. So it's better not to do so.