1
Wenn ich auf ein Bild klicke, möchte ich ein div ein- und dann ausblenden. Dieses div sollte immer denselben Platz belegen (display: block). Wenn ich noch einmal klicke, möchte ich dieses div wieder erscheinen lassen.Anzeige Block nach dem Ein- oder Ausblenden nach dem Fadeo
Kann dies nicht erreichen. Wenn ich fadeOut() verwende, wird ein Inline-Stil display:none hinzugefügt. Wenn ich fadeTo() verwende, wird das div ausgeblendet, ohne seinen Platz einzunehmen.
Wie muss ich es tun?
Code:
function edit(oneid)
{
AvisEdit(oneid);
}
function AvisEdit(oneid)
{
\t var nom = $('#X'+oneid+' .Nom').text();
\t ShowAlerts("Ara pots editar el valor dels camps de '"+nom+"'", 2);
}
function ShowAlerts(sms, code)
{
\t switch(code)
\t {
\t \t case 0:
\t \t \t Actions(sms, "success");
\t \t \t break;
\t \t
\t \t case 1:
\t \t \t Actions(sms, "error");
\t \t \t break;
\t \t case 2:
\t \t \t Actions(sms, "info");
\t \t \t break;
\t }
}
function Actions(sms, tipus)
{
\t $("#warningboxes").toggleClass(tipus); \t // Add class
\t $('#warningboxes').css('visibility','visible').hide(); \t \t // start hidden to fadein
\t $("#warningboxes").html(sms); // add message in div
\t $("#warningboxes").fadeIn(1500, function() // show up
\t \t {
\t \t \t setTimeout(function()
\t \t \t {
\t \t \t \t $('#warningboxes').fadeOut(1500, 0); // dissapears but removes space of div #warningboxes; with fadeto(), fadein won't work anymore
\t \t \t }, 1500)
\t \t \t
\t \t \t
\t \t \t setTimeout(function()
\t \t \t {
\t \t \t \t BackToStd(tipus); // remove the properties added so it still works
\t \t \t \t
\t \t \t }, 3000);
\t \t } \t \t \t
\t);
}
function BackToStd(tipus)
{
\t $('#warningboxes').toggleClass(tipus);
\t $('#warningboxes').css(
\t \t {
\t \t \t display: "block",
\t \t \t opacity: "",
\t \t \t filter: "",
\t \t \t zoom: "",
\t \t \t visibility: ""
\t \t }
\t);
}.warningboxes
{
\t border: 1px solid;
\t margin: 10px 0px;
\t padding:15px 10px 15px 50px;
\t background-repeat: no-repeat;
\t background-position: 10px center;
\t visibility:hidden;
\t display:block;
}
.info
{
\t color: #00529B;
\t background-color: #BDE5F8;
\t background-image: url('../res/PNGICONS/KnobInfo.png');
}
.success
{
\t color: #4F8A10;
\t background-color: #DFF2BF;
\t background-image: url('../res/PNGICONS/KnobValidGreen.png');
}
.warning
{
\t color: #9F6000;
\t background-color: #FEEFB3;
\t background-image: url('../res/PNGICONS/KnobAttention.png');
}
.error
{
\t color: #D8000C;
\t background-color: #FFBABA;
\t background-image: url('../res/PNGICONS/KnobCancel.png');
}<body>
\t <div class="warningboxes" id ="warningboxes" name="warningboxes"> Info message</div>
\t <table id="myid">
....
....
...
<img src='./res/edit.png' id='imagenok4' class='deleteAndOthers' OnClick='edit(4)'>
<img src='./res/edit.png' id='imagenok5' class='deleteAndOthers' OnClick='edit(5)'>
<img src='./res/edit.png' id='imagenok6' class='deleteAndOthers' OnClick='edit(6)'>
....den gesamten Code Hinzufügen zu chaotisch und irrelevant wäre. Der wichtigste Teil ist in
function Actions(sms, tipus)
hier ist, wo ich FadeIn und fadeout ...
Ich habe viel darüber gelesen, aber nicht meinen Code machen zu arbeiten.
DANKE!
Sieht gut aus, aber kann es nicht in Ordnung bringen noch ... Wie tun Sie das gleiche, aber versteckt beginnen und dann sichtbar zu machen? Statt sichtbar-> versteckt-> sichtbar? Vielen Dank. Mmm warten Ich denke, ich habe es, muss noch ein paar Tests machen. Habe gerade deine Antwort gesehen (dass du zu aktualisieren bist). Danke noch einmal! –
Lassen Sie mich den Code dafür aktualisieren. –
Danke, sehr nützlich! –