Teamspeak Viewer Problem

CracyCrazz · 07/21/2012, 22:27

Moin,

ich habe mich heute mal bisschen an jQuery gewagt indem ich versucht habe einen DIV zu animieren bzw. die Breite zu verändern in einer Animation (tut mir leid ich weiß nicht wie ich es ausdrücken soll).

Der JavaSkript Code sieht so aus:

PHP Code:



 
            var status = 0; 
            var warten = false; 
             
            function slide() 
            { 
             
                if(status == 1) 
                { 
                 
                    $("#teamspeak_viewer").animate({width: 42}, "slow", function(){status = 0;}); 
                     
                }else{ 
                     
                    $("#teamspeak_viewer").animate({width: 342}, "slow", function(){status = 1;}); 
                     
                } 
                 
            } 
             
            $("#teamspeak_viewer").click(function() 
            { 
                 
                slide(); 
                 
            });

Das ganze soll halt die Funktion haben das auf der Rechten Seite ein Button ist auf den ich klicke und dann der Teamspeak Viewer zu vorschein kommt. Nur passiert nichts wenn ich auf den Button klicke.

Der HTML Ausschnitt sieht so aus:

PHP Code:



 
        <div id="teamspeak_viewer"> 
         
            <iframe style="height: 100%;overflow: auto;scrolling: no;margin-left: 40px;width: 320px;border:none;" src="/tsviewer/viewer.php"></iframe> 
         
        </div>

Ich hoffe ihr könnt mir in irgend einer Weise helfen.

マルコ · 07/21/2012, 22:39

Arbeite nicht mit width, sondern mit Margin. Margin kann auch negativ sein. Damit kannst du es auf alle Fälle bewegen. Und noch ein Tipp: mach erstmal ein stop(true), damit die Animationen sich nicht aufstapeln, wenn jemand schnell mit der Maus drüber fährt.

CracyCrazz · 07/22/2012, 14:52

Quote:

Originally Posted by マルコ

Arbeite nicht mit width, sondern mit Margin. Margin kann auch negativ sein. Damit kannst du es auf alle Fälle bewegen. Und noch ein Tipp: mach erstmal ein stop(true), damit die Animationen sich nicht aufstapeln, wenn jemand schnell mit der Maus drüber fährt.

Da tut sich garnix. Ich hab es mit verschiedenen Styles probiert also auch einfach mal z.B. das display auf none zu setzen. Aber beim klicken passiert einfach nichts.

Nur sehe ich keine Fehler, also hoff ich mal das mir jemand anders da vllt. nochmal was zu sagen kann.

CracyCrazz · 07/25/2012, 13:44

Das Problem besteht weiterhin, die Lösung von

hat leider nicht funktioniert.

kissein · 07/25/2012, 14:41

Quote:

Originally Posted by CracyCrazz

Moin,
ich habe mich heute mal bisschen an jQuery gewagt indem ich versucht habe einen DIV zu animieren bzw. die Breite zu verändern in einer Animation (tut mir leid ich weiß nicht wie ich es ausdrücken soll).

Ich hoffe ihr könnt mir in irgend einer Weise helfen.

Code:

Hides the element by sliding it down.
$("div").click(function () {
      $(this).hide("slide", { direction: "down" }, 1000);
});

Code:

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  div { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
</style>

  <script>
  $(document).ready(function() {
    
$("div").click(function () {
      $(this).hide("slide", { direction: "down" }, 1000);
});

  });
  </script>
</head>
<body style="font-size:62.5%;">
  <div></div>
</body>
</html>

Nimm dir das als beispiel und passe es an deine bedürfnisse an.