this is my first post on SO :-)
I'm having a problem getting MooTools to morph to a CSS class. I'm pretty sure I've followed the docs and demo, but when I call myElement.morph('.hover')
it will not morph to the .hover
class. My setup is as follows:
index.html:
<!DOCTYPE html>
<html lang="en">开发者_如何学C;
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src='mootools.js' type="text/javascript"></script>
<script src='hover.js' type="text/javascript"></script>
</head>
<body>
<div class="btn"></div>
</body>
</html>
hover.js:
window.addEvent('domready', function() {
var myElement = $$('.btn')[0];
myElement.morph('.hover'); // This doesn't work
//myElement.morph({ 'background-color': '#009' }); // This works
//myElement.set('class', 'hover'); // This also works
});
style.css:
.btn {
width: 200px;
height: 100px;
background-color: #999;
}
.hover {
width: 200px;
height: 100px;
background-color: #009;
}
I found someone with a related problem, but .hover
is the full name of my selector...so I'm stumped.
Thanks in advance for any help!
this does not work because there's a bug: https://mootools.lighthouseapp.com/projects/2706/tickets/1063-no-class-morphing-with-13-no-compat
milestone for fix: 1.3.1 (so very soon) - or you can get the patch to Element.Style.js from the 1.3.1 branch on github.
There seems to be an error with Mootools 1.3 Core (non-compat).
If you select the non-compat version in the above Fiddle, you get the following error: Element.Styles.each is not a function
.
The solution is probably to switch to MooTools Core 1.3 with compatibility.
(It seems that the property Styles
in the Element
class no longer exists as of 1.3)
just my 2 cents. Should not it be like this : http://jsfiddle.net/3wKhN/
精彩评论