jquery div fade in

Foos · 10.11.2010

Hey,

für alles gibt es ja im Internet fertige Jquery-Skripte. (Lightbox, Tooltip, etc.)
Genau so ein fertiges Skript suche ich nun für einen Fade-In eines Div Containers. Also ähnliche dem Jquery-Toggle, nur das durch Klick auf ein Bild mein Div-Container eingeblendet wird.

Hat jemand von euch zufällig eine Ahnung?

leveler · 10.11.2010

AW: jquery div fade in

evt sowas hier

.fadeIn() – jQuery API

Foos · 10.11.2010

AW: jquery div fade in

Danke leveler, das ist schon fast ein wenig zu komplex

Ich habe nun doch selbst was gefunden:

Dabei bräuchte ich nooch eine kleine Hilfe. Und zwar ist ja der "hide" und "show" button nun immer da. Ich hätte aber immer nur gerne 1 Button zu sehen. Also wenn ich auf "hide" klicke verschwindet dieser und nur der "show" button ist zu sehen:
Das .js sieht so aus:

Code:

$(document).ready(function() {
  $("#hideButton").click(function() {
    $("#div1").fadeOut("slow", function() {
      $("#div2").fadeOut("normal", function() {
        $("#div3").fadeOut("fast");
		
      });
    });
    $("#div4").fadeOut(600, function() {
      $("#div5").fadeOut(400, function() {
        $("#div6").fadeOut(200);
      });
    });
  });
  $("#showButton").click(function() {
    $("#div1").fadeIn("slow");
    $("#div2").fadeIn("normal");
    $("#div3").fadeIn("fast");
    $("#div4").fadeIn(600);
    $("#div5").fadeIn(400);
    $("#div6").fadeIn(200);
  });
});

fexx · 10.11.2010

AW: jquery div fade in

so zb:

Code:

$(document).ready(function() {
$("#showButton").hide();

  $("#hideButton").click(function() {
    $("#div1").fadeOut("slow", function() {
      $("#div2").fadeOut("normal", function() {
        $("#div3").fadeOut("fast");
        
      });
    });
    $("#div4").fadeOut(600, function() {
      $("#div5").fadeOut(400, function() {
        $("#div6").fadeOut(200);
      });
    });   
  $(this).hide();  
  $("#showButton").show(); 
  });
  $("#showButton").click(function() {
    $("#div1").fadeIn("slow");
    $("#div2").fadeIn("normal");
    $("#div3").fadeIn("fast");
    $("#div4").fadeIn(600);
    $("#div5").fadeIn(400);
    $("#div6").fadeIn(200);    
    $(this).hide();  
    $("#hideButton").show(); 
  });
});

Foos · 10.11.2010

AW: jquery div fade in

fexx schrieb:

so zb:

Code:

$(document).ready(function() {
$("#showButton").hide();

  $("#hideButton").click(function() {
    $("#div1").fadeOut("slow", function() {
      $("#div2").fadeOut("normal", function() {
        $("#div3").fadeOut("fast");
        
      });
    });
    $("#div4").fadeOut(600, function() {
      $("#div5").fadeOut(400, function() {
        $("#div6").fadeOut(200);
      });
    });   
  $(this).hide();  
  $("#showButton").show(); 
  });
  $("#showButton").click(function() {
    $("#div1").fadeIn("slow");
    $("#div2").fadeIn("normal");
    $("#div3").fadeIn("fast");
    $("#div4").fadeIn(600);
    $("#div5").fadeIn(400);
    $("#div6").fadeIn(200);    
    $(this).hide();  
    $("#hideButton").show(); 
  });
});

hm, da ändert sich nichts bei mir. also es sind trotzdem beide buttons IMMER da...

leveler · 10.11.2010

AW: jquery div fade in

haste denn auch eine entsprechende id für den "showButton"-Button vergeben?

fexx · 10.11.2010

AW: jquery div fade in

weis nicht was du hast ... läuft doch eins a:
http://jsfiddle.net/UVx3u/

Foos · 10.11.2010

AW: jquery div fade in

fexx schrieb:
weis nicht was du hast ... läuft doch eins a:
Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

häää :lol:
Vielleicht liegt es daran, dass ich einige Boxen entfernt habe:?!

Code:

    <title>Show und Hide</title>
    <script src="jquery_04-3_fade-Dateien/jquery.js" type="text/javascript"></script>
    <script src="jquery_04-3_fade-Dateien/jquery_04-3_fade.js" type="text/javascript"></script>
<style type="text/css">
      
	    #buttons {
	width: 200px;
	position:absolute;
	left: 310px;
	top: 96px;
	background-color: transparent;
	border: 0px;
	  }
	  div { width: 100px; height: 100px; background-color: black; border: 1px solid #000; }
	
    </style>
  </head><body>
  
  <div id="buttons">
    <input id="hideButton" value="" type="button" style="width: 100px; height:100px; background-image:url(jquery_04-3_fade-Dateien/2.jpg);" />
    <input id="showButton" value="show" type="button" /></div>
    <div id="div1" style="position: absolute; left: 10px; top: 60px; 
display: none;">blablabla</div>

</body></html>

Code:

$(document).ready(function() {
$("#showButton").hide();

  $("#hideButton").click(function() {
    $("#div1").fadeOut("slow", function() {
      $("#div2").fadeOut("normal", function() {
        $("#div3").fadeOut("fast");
        
      });
    });
    $("#div4").fadeOut(600, function() {
      $("#div5").fadeOut(400, function() {
        $("#div6").fadeOut(200);
      });
    });   
  $(this).hide();  
  $("#showButton").show(); 
  });
  $("#showButton").click(function() {
    $("#div1").fadeIn("slow");
    $("#div2").fadeIn("normal");
    $("#div3").fadeIn("fast");
    $("#div4").fadeIn(600);
    $("#div5").fadeIn(400);
    $("#div6").fadeIn(200);    
    $(this).hide();  
    $("#hideButton").show(); 
  });
});

EDIT:

Auch wenn ich den Code, 1:1 von jsfiddle rauskopiere, bleiben immer beide Buttons da. Das kann doch gar nicht funktionieren??!?!

fexx · 10.11.2010

AW: jquery div fade in

nein, das liegt daran, dass bei dir der div ausgeblendet ist ...

so funktioniert es: http://jsfiddle.net/v6RMy/

du könntest das ganze aber auch mit toggle lösen ... http://api.jquery.com/toggle/

Foos · 10.11.2010

AW: jquery div fade in

Recht Herzlichen Dank!

Einwandfrei...

dankedankedanke