My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML:
<div class="LoadDataWidget">
<div id="arrow" class="greenArrow"></div>
</div>
.LoadDataWidget {
width: 995px;
height: 591px;
background-image: url('images/loading-data.png');
background-repeat: no-repeat;
position: relative;
margin: 0px auto;
visibility: hidden;
}
.LoadDataWidget .greenArrow {
width: 102px;
height: 141px;
background-image: url('images/loading-arrow.png');
background-position: bottom;
background-repeat: no-repeat;
position: absolute;
left: 500px;
top: 205px;
}
Here is the JavaScript+mootools animation script:
window.addEvent('domready', function(){
var effect = new Fx.Tween('arrow', {duration: 800}),periodical;
// Create the function to run the effect
var fx = function() {
effect.start('height', '141').chain(function(){
effect.start('height', '161');
});
return fx;
};
fx().periodical(1700);
var singleImage = $$('.LoadDataWidget');
singleImage.set('styles', {
'opacity': 0,
'visibility': 'visible'
});
singleImage.fade('in');
});
The animation works successfully, moving the arrow from top to bottom.
However, when attempting to use this script in a GWT application with elements having the class "LoadDataWidget" and ID "arrow," it does not function as expected.
Below is the Java code for the GWT Composite that I am trying to animate:
import com.google.gwt.user.client.ui.SimplePanel;
public class LoadDataWidget extends SimplePanel {
public LoadDataWidget() {
setStyleName("LoadDataWidget");
SimplePanel arrow = new SimplePanel();
arrow.setStyleName("greenArrow");
arrow.getElement().setId("arrow");
setWidget(arrow);
}
}
Could the issue be related to the domready event? Any suggestions on how to resolve this problem?