✔ Chartanzeige mit transition ease

rernanded

rernanded

Erfahrenes Mitglied
Hi
ich habe ein simples Chartscript und möchte dass die durch submit erzeugten Balken sich langsam aufbauen/vergrößern.

transition width ease 3s???

Besonders klasse wäre es könnte ich das für alle Balken jeweils einzeln "einstellen".


PHP: 
<form action="prozentrechnen.php" method="post">
<input type="text" name="wunsch1"><br />
...
<input type="submit" value="los">
</form>

<?php
$wunsch1=$_POST['wunsch1'];
...

$gesamt = $wunsch1 + ...;
$wunsch1prozent = $wunsch1 * 100 / $gesamt;
...

$wunsch1balken = $wunsch1prozent * 9;
...
?>


<table>
  <tr>
    <td>Wunsch 1</td>
    <td><div class="panel" id="panel_wunsch1" style="width:<?php echo $wunsch1balken; ?>px; height:50px;" /></div></td>
    <td><?php echo $wunsch1prozent; ?> %</td>
  </tr>
<tr>
...
</tr>



</table>

Danke.
Moni
 
Ich glaube da bist du im falschen Forum. Entweder baust du es mit css (wie du es bereits angedeutet hast oder mit Javascript. Woran scheiterst du denn jetzt gerade genau? Soll sich die Aufbaudauer pro Balken gleich sein oder sich anders verhalten?
 
@Kalito @Sempervivum Danke soweit.
Ich habe keine Probleme damit eine Ani zu erstellen. Die Beispiele von Sempervivum sind mir bekannt.
Mein Problem ist jedoch, dass die Ani nicht starten soll wenn ich die Seite lade/aufrufe oder auf einen Button klicke.
Dazu habe ich genug Scripte.
Das Problem ist, dass ich in die Form Werte eingebe und dann erst gerechnet wird.
Ich habe also keine voreingestellten Werte zB in der css. Sondern diese werden immer wieder neu errechnet.

Das bedeutet sie werden aufgrund der php-Rechenoperationen erst erstellt und müssen dann in die css.
Das krieg ich aber nicht hin. Ich habe es mit einem onclick Handler im input submit versucht. Klappt aber nicht.

Hier zB ein Script dessen Teile ich ausprobiert habe, aber auch da sind ja die Werte in der css voreingestellt.
HTML: 
<!DOCTYPE html>
<html>
<head>
<style>

.panel {
   width: 100px;
   height: 50px;
   -webkit-transition: width 3s ease, height 3s ease;
   -moz-transition: width 3s ease, height 3s ease;
   -o-transition: width 3s ease, height 3s ease;
   -ms-transition: width 3s ease, height 3s ease;
   transition: width 3s ease, height 3s ease;  
}

#startbutton {
   padding: 10px 10px 10px 10px;
   margin: 10px 10px 10px 10px;
   display: block;
   text-align: center;      
}

.panel-change1 { width: 900px;}
.panel-change2 { width: 600px;}
.panel-change3 { width: 300px;}

#panel1 {   background-color: red;}
#panel2 {   background-color: orange;}
#panel3 {   background-color: yellow;}

</style>
</head>

<body>

<div id="headline"></div><br />
<div id="subheadline"></div><br />
<div id="text"></div><br />
<div class="panel" id="panel1"></div><br />
<div class="panel" id="panel2"></div><br />
<div class="panel" id="panel3"></div><br />

<input type="button" value="> <" id="startbutton">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script>
$(function() {
   $("#startbutton").click(function() {
       $("#panel1").toggleClass("panel-change1");
       $("#panel2").toggleClass("panel-change2");
       $("#panel3").toggleClass("panel-change3");
   });
});
</script>

</body>
</html>



Wie ich nun die Vorschläge von Sempervivum als Lösungen nutzen soll ist mir nicht klar?

MONI
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück