jQuery Slideup/Down Anhängen Frage

Question

$(".item").hover(
  function () {
    $(this).slideDown().append(
            $("<div class=\"attending\">Yes/No</div>")
        );
  }, 
  function () {
    $(this).find("div:last").slideUp().remove();
  }
);

Ich verwende den obigen Code, um ein div an den unteren Rand eines Elements anzuhängen, wenn es überrollt wird. Ich habe eine Reihe von .item divs, jedes bekommen es an sie auf Rollover angehängt, aber aus irgendeinem Grund bin ich nicht in der Lage, die slidedown/up Arbeit zu machen.

Irgendwelche Ideen?

Answer 1

$(".item").hover(
    function () {
        var answer = $("<div class=\"attending\">Yes/No</div>").hide();
        answer.appendTo($(this)).slideDown();
    }, 
    function () {
        $(this).find("div:last").slideUp("normal", function() {
            $(this).remove();
        });
    }
);

Es rutscht nicht runter!

Sie haben das falsche Kind an das falsche Element angehängt und vergessen, das Element zuerst auszublenden.

Es rutscht nicht nach oben!

Diese Zeile beginnt mit dem Hochrutschen, wartet aber nicht auf das Ende der Animation und entfernt das Element.

$(this).find("div:last").slideUp().remove()

Answer 2

Intuitiv würde ich sagen, dass Sie den Gleiteffekt auf das falsche Element kleben. Er wird aufgerufen auf .list statt div.attending das ist das Feld, das Sie vermutlich sehen wollen.

Answer 3

Versuchen Sie

$(".item").hover(
  function () {
    $(this).append(
        $("<div class=\"attending\">Yes/No</div>").hide();
    ).find("div:last").slideDown();
  }, 
  function () {
    $(this).find("div:last").slideUp("normal", function() {
      $(this).remove();
    });
  }
);

Answer 4

Ich hatte ein ähnliches Problem, ich benutzte .append() mit Callback-Funktionen versucht - hat aber überhaupt nicht funktioniert. So, hatte einen Trick gemacht und erfolgreich. Nimm eine kurz Aussehen. Hier sind die Schritte.

• während des Anhängens von Inhalten; nehmen Sie eine Variable und halten Sie ihren Wert inkrementiert, wenn der append-Funktionsblock aufgerufen wird.
  Einstellen einer ID mit dieser Variablen für dieses Element und Beibehalten des ausgeblendeten Elements.

function add_more_charge() { var i = $("#store_id_value").val(); var id = 'some_id_'+i; var str= '<div style="display:none" id="'+id+'">...............</div>'; $("#store_id_value").val(++i); $("#additional_charges").append(str); $("#"+id).slideDown(); }

hier, in diesem <input type="hidden" id="store_id_value" value="2" /> wird ein Wert gespeichert, der bei jedem Aufruf erhöht wird.

Wir können Zufallszahlen generieren. Die Verwendung von globalen Variablen ist ebenfalls eine gute Option.

Answer 5

$(".item").hover(
  function () {
    var content = $(this).append($("<div class=\"attending\">Yes/No</div>")).hide();
    $('.attending').last().slideDown();
  }, 
  function () {
    $(this).find(".attending").last().slideUp("normal", function() {
      $(this).remvove();
    });
  }
);

Versuchen Sie dies, es ist ein wenig hackish, aber tut seine Arbeit.