Question

This is driving me mad , I have a code that works perfect with FX. Morph in 1.2.x all values also work in 1.1 but the border-color or border simply do not work and trow NaNpx error.

        var fx = new Fx.Styles(element,{ duration:500,wait:false });
            element.addEvents({
                'mouseenter': function() { fx.start({ 
                'background-color':'#ff8c00',
                'border-color':'1px solid #cccccc'
            });

I checked and getStyle(‘border’) in moo 1.1 returns 1px solid #fffff
but border-color returns 4x #ffffff for each border I guess , so how should I declare this properly , each border , border-width , border-style ,
I have tried all the above and all of them trow error. Most cases NaNpx

Here is JSfiddle
http://jsfiddle.net/b44Wp/8/

when you switch from 1.1.2 to 1.2.5 change Styles to Morph , and now on that example even 1.2.5 is trowing the same error but it shows the black border.

As soosn as I use the border IE7 does not work at all , background color works fine . I am sorry but I have to support multiple browsers including our “best friend”

If you know better solution which would be simply transition another div class in and keep same visual effect please please advise. Thank you!!

Answer 1

You should put ‘border-color’ as property 😉 http://jsfiddle.net/xDWZr/

var myelement = $$('.mydiv');

myelement .each(function(myelement ) {  
    var fx = new Fx.Styles(myelement ,{ duration:500,wait:false});
        myelement.addEvents({
            'mouseenter': function() { fx.start({ 
            'background-color':'#ff8c00',
            'border-color':'#000000'
        }); 
},
          'mouseleave': function() { fx.start({ 
             'background-color':'#ffffff',
            'border-color':'#CCCCCC'
         }); 
  }
   });
 });

but…u should also update to a newer mootools version (now it’s 1.4.1) 😉