Feuer jquery .animate oninput nur einmal

http://jsfiddle.net/nFFuD/Feuer jquery .animate oninput nur einmal

Ich versuche, das Suchfeld in diesem Beispiel zu animieren jquery verwenden, so dass es nach oben bewegt davon div oninput ist enthalten. Ich benutzte ursprünglich scriptaculous effect.move, um dies zu tun, aber ich konnte das Ereignis nicht nur einmal auslösen, also wenn jemand nach dem ersten Tastendruck weiter tippte, würde der Effekt anhalten und von seiner aktuellen Position in der Animation für jeden neu beginnen zusätzlicher Tastenanschlag, der dumm ist. Ich bin neu in der Verwendung von jQuery, also bitte, nimm es leicht, wenn ich nicht viel Sinn mache.

EDIT: Das Beispiel, das auf jeden Fall geschrieben ocanal funktioniert, aber aus irgendeinem Grund für mich, es funktioniert nicht, wenn ich es anwenden - hier ist das, was zur Zeit habe ich bisher - auch ein div auf der gleichen Veranstaltung zu verblassen versuchen

<!doctype html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<title>Untitled</title> 
<head> 
<meta charset="utf-8"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 

$('#search').keypress(function() { 

    $(this).animate({ 
    top: '0', 
    }); 

    $('#icon).fadeOut('slow', function() { 

    }); 

}); 

</script> 
<style type="text/css" media="screen"> 

body { 
    margin: 0px; 
    padding: 0px; 
} 

#container { 
    position: relative; 
    border: #000 1px solid; 
    margin: 0px auto; 
    width: 960px; 
    height: 800px; 
} 

input { 
    outline: none; 
} 

#icon { 
    position: absolute; 
    top: 80px; 
    left: 370px; 
    width: 200px; 
} 

#search { 
    position: absolute; 
    top: 300px; 
    left: 230px; 
      width: 500px;   
} 

</style> 
</head> 
<body> 
<div id="container"> 
    <img id="icon" src="icon.png" alt="icon">   
    <input id="search" type="text" autofocus="autofocus"> 
</div> 
</body> 
</html>

Quelle

2012-04-12 Ryan

change funktioniert wie blur, so dass Sie, dass mit keypress Fall tun sollte, glaube ich,

$('#search').keypress(function() { 

    $(this).animate({ 
    top: '0', 
    }); 
});

http://jsfiddle.net/ocanal/nFFuD/7/

EDIT:

der Code, den Sie sich nicht mit anderen geteilt arbeiten, weil Sie Ereignisfunktionen initialisieren sollte, wenn dom bereit ist, Sie es nicht in jsFiddle verwenden müssen, weil Sie die Zeit auswählen können, wenn Skript wird funktionieren.

$(document).ready(function() { 
//your functions. 
});

als es funktioniert.

$(document).ready(function() { 
    $('#search').keypress(function() { 

     $(this).animate({ 
     top: '0', 
    }); 

     $('#icon').fadeOut('slow', function() { 

     }); 

    }); 
});

and here is your working code

Quelle

2012-04-12 17:29:39 ocanal

das funktioniert perfekt - überprüfen Sie meine Bearbeitung auf die Frage, obwohl ich noch ein paar Probleme habe – Ryan

@luke, so sehe meine aktualisierte Antwort wieder. – ocanal

Ehrfürchtig. Vielen Dank. – Ryan

Es gibt ein paar Fehler mit Ihrer Syntax. Versuchen Sie folgendes:

$('#search').change(function() { 

    $(this).animate({ 
    top: '0' 
    }); 

});

Es ist kein += sein sollte. Dies bedeutet, dass Sie der aktuellen oberen Position Null hinzufügen und damit animieren werden. 0 animiert zum eigentlichen Top.
Nach der obersten Eigenschaft sollte kein Komma sein
Sie müssen die Klammer auf die animate Funktion schließen.
$('this') sollte $(this) sein. Wenn Sie es in Anführungszeichen übergeben, wird es tatsächlich nach einem <this> Element suchen, das natürlich nicht irgendwo auf Ihrer Seite ist, weil das nicht gültiges HTML ist.

Quelle

2012-04-12 17:30:00 Jeff

Sie hatten ein paar Syntaxfehler gehen; Wenn ich Code schreibe, würde ich die Verwendung von Firebug oder sogar der Entwicklerwerkzeuge in Chrome/IE9 empfehlen, um diese Fehler zu finden. Dieser Code funktioniert gut:

$('#search').on('keyup',function(){ 
    $(this).animate({ 
     top:0 
    });     
});

Quelle

2012-04-12 17:31:25 faino

Sie hatten ein paar Probleme mit Ihrem Skript.Hier ist eine funktionierende Version für das, was ich denke, was Sie tun möchten: jsfiddle

$('#search').change(function() { 
$(this).animate({ 
    top: '0' 
}) 
})

Zuerst in der Funktion des Elements zu nennen, ist es $(this) nicht $('this'). Wenn etwas in Anführungszeichen steht, verweist es auf ein bestimmtes Element. Ohne Anführungszeichen ist es eine Variable.

Sie müssen auch das nachstehende Komma nach top: '0' loswerden. Es wird in modernen Browsern funktionieren, aber IE wird es nicht zulassen.

Sie haben auch eine schließende Klammer in Ihrer animierten Funktion vermisst. Sie sollten die Konsole verwenden, um diese Fehler zu erkennen. Firebug in Firefox oder, wenn Sie Chrome verwenden, klicken Sie mit der rechten Maustaste auf die Seite und dann auf "Element prüfen". Die Konsole hilft Ihnen beim Debuggen, indem sie Ihnen Fehler anzeigt. Sie können dort auch Warnungen senden, indem Sie console.log() verwenden.

Quelle

2012-04-12 17:33:46 podcastfan88

Feuer jquery .animate oninput nur einmal

Antwort

Verwandte Themen