I would like to ask for help regarding a CSS transition which works but is not working when I update the page with an ajax recall.
I try to explain:
I defined a compass CSS object and an arrow of this compass which should be oriented in the compass as the wind does (wind direction is updated every second).
I created a CSS object and the arrow moves to the initial position slowly with the transition effect. Then every second there is an update of the wind data and I use an Ajax call to update the page.
Consider that the windDirUpdater function is returning the updated wind direction (json['now']). The arrow updates the position but without transition. Can anybody help me, please?
Below is the part of the code which I am using now to define the CSS object and the ajax recall. Thanks Fabio ruzzi.f@gmail.com
</style>
<table style="width:98%;margin:0 auto">
<tr>
<td>
<div class="compass" id="nowDirDiv">
<div class="direction">
<p style="font-size:1.2em"><?php echo $direction['nowwind']?> <?php echo unitFormatter($displayWindUnits)?><span><?php echo $direction['nowdir']?>° (<?php echo $direction['nowdirabb']?>) </span></p>
</div>
<div class="arrow x<?php echo $direction['nowdir']?>"></div>
</div>
</td>
</tr>
<script>
windDirupdater();
setInterval(function(){ windDirupdater(); }, (1*1000));
function windDirupdater(){
$.ajax({
url : "homepage/blocks/windDir/windDirUpdater.php",
dataType : 'json',
success : function (json) {
html = '<div class="direction"><p style="font-size:1.2em">'+json['nowwind']+' <?php echo unitFormatter($displayWindUnits)?><span>'+json['nowdir']+'° ('+json['nowdirabb']+')'+'</span></p></div><div class="arrow x'+json['nowdir']+'"></div>';
$("#nowDirDiv").html(html);
}
})
}
</script>