javascript - Fade a css border to invisible? - Stack Overflow

admin管理员组

文章数量:1193188

Is it possible to fade an element's border away? To clarify, this needs to be triggered from javascript, and using something like jquery for animation is NOT an option. We're using sencha but it doesn't look like you can animate anything but element size and position with extjs. I know css3 has some handy animation, but I can't find anything similar to my needs.

Is it possible to fade an element's border away? To clarify, this needs to be triggered from javascript, and using something like jquery for animation is NOT an option. We're using sencha but it doesn't look like you can animate anything but element size and position with extjs. I know css3 has some handy animation, but I can't find anything similar to my needs.

• javascript
• extjs
• css

Share Improve this question Follow asked Oct 12, 2011 at 18:57 CDelaneyCDelaney 1,24844 gold badges1919 silver badges3737 bronze badges 1

• Guess you could always write your own tweening function shrink width to 0 and fade color to transparent, if nothing else. – Marc B Commented Oct 12, 2011 at 18:59

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 22

Something like this ?

div.transition {
  border: 5px solid rgba(0,0,0,1);
  height: 100px;
  width: 100px;
  background-color: #ffffff;

  -webkit-transition: border-color 1s linear; /* Saf3.2+, Chrome */
     -moz-transition: border-color 1s linear; /* FF3.7+ */
       -o-transition: border-color 1s linear; /* Opera 10.5 */
          transition: border-color 1s linear;
}

div.transition:hover {
  border-color: rgba(0,0,0,0);
}

Demo at http://jsfiddle.net/gaby/bcn5c/1/

Keep in mind that transitions don't work in Opera (11.62) if you just write border-color. You have to specify all four borders separately:

-o-transition: border-top-color 1s linear, border-right-color 1s linear, border-bottom-color 1s linear, border-left-color 1s linear;

http://jsfiddle.net/ds5bM/

This is fixed in Opera 12.

just use CSS3 transitions

#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

本文标签： javascriptFade a css border to invisibleStack Overflow