Animate wird nicht stoppen() - ärgerlich einfaches Jquery Problem

Question

Ich bin neu bei Jquery und versuche, ein Suchfeld so zu animieren, dass es ein- und ausblendet, und wenn Sie auf das Schließen-Symbol (#search-close) klicken, verschwindet es und das Schließen-Symbol #search-close verschwindet.

Das Einblenden funktioniert gut, aber wenn ich auf die Schaltfläche zum Schließen klicke, blendet es aus, aber blendet sofort wieder ein.

Ich weiß, dass es wirklich einfach ist.

Vielen Dank im Voraus

$j(document).ready(function() {

$j('#search-slide').mousedown(function() {
$j('#search-close').fadeIn(100);
$j('#search-slide').animate({'left':-1});
$j('#tbcopy a').fadeOut(100);});

$j('#search-close').mousedown(function() {
$j('#search-close').stop().hide();
$j('#search-slide').stop().animate({'left':-250});
});});

Answer 1

Fügen Sie .stop(true,true) hinzu, dies setzt clearQueue auf true und springt zum Ende der Animation.

Answer 2

Der Grund, warum du diesen Fehler bekommst, glaube ich, liegt daran, wo sich der Schließen-Button befindet, da er innerhalb des oberen divs ist, löst er tatsächlich beide Klickereignisse aus. Der Grund, warum dein stop() wahrscheinlich nicht funktioniert, liegt daran, dass diese unterschiedliche Animations-Warteschlangen haben, da es sich um unterschiedliche Elemente handelt. Versuche, einen booleschen Wert zum äußeren div hinzuzufügen, der überprüft wird, bevor die Animation darauf ausgeführt wird.

Answer 3

Ich würde vorschlagen, die .finish() Methode zu verwenden, da sie ähnlich wie .stop(true,true) ist, aber .finish() die Animation tatsächlich beendet und nicht in der Mitte anhält.

Answer 4

Sie könnten eine Klasse hinzufügen, die verhindert, dass die Box nach dem Klicken erneut ausgelöst wird.

$(document).ready(function () {
    $('#search-slide').click(function () {
        if ($(this).hasClass('visible')) {
            console.log('ausgelöst');
            return;
        } else {
            $('#search-close').fadeIn(100);
            $(this).animate({
                'left': -1
            }).addClass('visible');
            $('#tbcopy a').fadeOut(100);
        }
    });
    $('#search-close').click(function () {
        $(this).stop().hide();
        $('#search-slide').stop().animate({
            'left': -250
        });
    });
});

Ein funktionierendes jsfiddle. Nur als Hinweis, die Box öffnet sich mit meiner Lösung nicht erneut, aber da Sie nicht angegeben haben, dass Sie möchten, dass sie sich erneut öffnet.