Question: I am trying to make a mobile detection class that is supposed to strip the user agent to a simple basic string like this:

> 
> **Output:**
>  Mozilla/5.0 (\*Linux x86\_64\*) AppleWebKit/\* (KHTML, like
>  Gecko) Chrome/\* Safari/\*
> 
> 
> 

from this:

> 
> **Input: (HTTP\_USER\_AGENT)**
>  Mozilla/5.0 (X11; Linux x86\_64) AppleWebKit/537.17 (KHTML, like Gecko)
>  Chrome/24.0.1312.69 Safari/537.17
> 
> 
> 

I am using this: `/[0-9.-]{4,}/i` pattern to strip the numbers and I get:

> 
> **RESULT OF WHERE AM I SO FAR WITH ABOVE PATTERN:**
>  Mozilla/5.0 (X11; Linux x86\_64) AppleWebKit/\* (KHTML, like Gecko)
>  Chrome/\* Safari/\*
> 
> 
> 

but my problem is how to remove the `X11;` I want a pattern that will remove everything everything after the first opening bracket and till the first empty space I think it is the right way. Acceptable alternative will be to be able to remove the brackets at all with a pattern.

Any suggestions?

PS: I am needing this to solve a problem with mobile detection and the dependency on browscap. So please no downvotes please!

PS2: the main purpose of this is to detect mobile clients and a desktop. after that I will tweak it to give information for the OS, and etc..

Answer: 
If you're talking about actually creating a smooth transform between font-style's this really isn't possible. But, if you just want to create a fade effect on hover to transition between two font styles, something like this should work:

<http://jsfiddle.net/7NATE/8/>

HTML

```
<div id="container">
    <span class="font1">Hello World!</span>
    <span class="font2">Hello World!</span>
</div>

```

CSS

```
.font1{
    font-family: Tahoma;
}

.font2{
    font-family: Georgia;
    display: none;
}

```

JS

```
var $f1 = $(".font1"), $f2 = $(".font2"), $c = $('#container');

$c.hover(function(){    
    if(!$f1.is(':animated') && !$f2.is(':animated')){
        $f1.fadeOut(function(){
             $f2.fadeIn();
        });
    }
},
function(){
    if(!$f1.is(':animated') && !$f2.is(':animated')){
        $f2.fadeOut(function(){
            $f1.fadeIn();
        });
    };
});

```
In either way, css or js, I don't we can change font-family in slow motion.

For color, background, width, height, or etc, We can calculate the state in each frame when it is animated.

But for font-family, I don't think it's possible to calculate frame state during the period of animation, unless font-family is an image, but it is not.