Kommentare zu: “Rising Curtain”-Effekt bei Input-Feldern mit jQuery

Von: Emanuel

Emanuel — Wed, 24 Mar 2010 14:44:15 +0000

@stefan: vielen dank für den hinweis. ich habe es nun über eine browser-weiche gelöst, da deine lösung zwar im ansatz gut ist, ich es aber für die usability wichtig finde, dass die input-felder und deren inhalt in einem formular alle zu sehen sind, so dass man seine eingaben vor dem absenden schnell noch einmal kontrollieren kann.

alternativ könnte man mit einer zweiten, absolut positionierten ebene hinter dem input-feld arbeiten, die nach oben verschoben wird, wenn das jeweilige input-feld den fokus hat, aber das erschien mir jetzt zu aufwendig.

@Line: "jemand" hat entsprechende anpassungen vorgenommen

Von: Line

Line — Wed, 24 Mar 2010 12:20:11 +0000

Danke Stefan! Wär super, wenn irgendwer noch die Demo entsprechend anpassen könnte Dankeschön

Von: Stefan

Stefan — Mon, 22 Mar 2010 16:23:33 +0000

sorry, hiernochmal das komplette und wirklich funktionierende skript:

jQuery(document).ready(function($) {
$('span').click( function() {
$(this).addClass('active');
var inputField = $(this).find(':first-child');
inputField.fadeIn('slow');
inputField.focus();
});
$('input').blur( function() {
$(this).parent().removeClass('active');
$(this).fadeOut('slow');
});
});

Von: Stefan

Stefan — Mon, 22 Mar 2010 16:12:12 +0000

So, ich hab das Skript mal ein bisschen angepasst, sodass es in allen Browsern läuft:
jQuery(document).ready(function($) {
$('span').click( function() {
// get the input field
var inputField = $(this).find(':first-child');
// add fadeIn effect
inp.fadeIn('slow');
// set focus to input field
inp.focus();
});
$('input').blur( function() {
// add fadeOut effect
$(this).fadeOut('slow');
});
});

Von: Stefan

Stefan — Mon, 22 Mar 2010 15:38:19 +0000

Nettes Tutorial, aber leider funktioniert das nicht im FF, da dieser die Eigenschaft 'background-position-y' nicht unterstützt. Eine alternative wäre '$(this).animate({'background-position' : '0, -28px'}', aber dabei geht der schöne Fading-Effekt verloren.