jQuery Slideup/Bas Append Question

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

Je suis en utilisant le code ci-dessus pour ajouter un div sur le fond d'un élément lorsqu'il est enroulé. J'ai un certain nombre de .élément de la vrd, chacun obtenant ajoutée au survol, mais pour une raison que je suis incapable de faire la slidedown/travail.

Des idées?

OriginalL'auteur James | 2009-05-14

  1. 30
    $(".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();
        });
    }
);

    Il ne glisse pas vers le bas!

    Vous ajouté le mauvais enfant pour le mauvais élément et vous avez oublié de cacher l'élément premier.

    Il ne glisse pas!

    Cette ligne commence à glisser, mais ne pas attendre pour l'animation à la fin et supprime l'élément.

    $(this).find("div:last").slideUp().remove()
    Celui-ci a elle. L' .remove() doit être appelée dans le cadre d'une fonction de rappel dans le .slideUp(). Sinon, ils s'exécuter en même temps. La fonction de rappel garantit le retrait ne se produit qu'à la fin de l'animation.
    Est-il possible d'exiger que le curseur est sur l'élément pendant plus de 2 secondes ou si?
    Oui, par le biais de Javascript setTimeout(). Ce n'est pas directement mis en œuvre dans jQuery. Je vous suggère de vous poser une autre question.
    J'ai vu d'autres solutions pour ce problème, mais c'est la plus élégante. Donner un +1.

    OriginalL'auteur Georg Schölly

  2. 1

    Intuitivement, je suis giong-à-dire que vous êtes claling l'effet glissement sur le mauvais élément. On l'appelle sur .list plutôt que div.attending, qui est la boîte, je suppose que vous voulez voir apparaître.

    OriginalL'auteur Andrew Noyes

  3. 1

    essayer

    $(".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();
    });
  }
);
    Ne glisse pas du tout. Juste à l'instant apparaître/disparaître
    La réponse ci-dessus est la version correcte (pas ma réponse). Toutes mes excuses.

    OriginalL'auteur Dmitri Farkov

  4. 1

    J'ai affronté le problème similaire. a l'aide de .append(); essayé avec des fonctions de rappel - mais ne fonctionne pas du tout.
    Donc, avait fait un truc et réussi. Prendre un bref look.
    voici les étapes-

    • tout en ajoutant du contenu; prendre une variable et de garder sa valeur en incrémentant à chaque fois que l'ajout de la fonction de bloc est appelé.

      Réglage d'une pièce d'identité avec cette variable pour cet élément et de le maintenir à cacher.

    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();
    }

    ici, dans ce- <input type="hidden" id="store_id_value" value="2" />
    une valeur est stockée, et incrémenté lors de chaque appel.

    Nous pouvons générer des nombres aléatoires. L'utilisation des variables globales sera une bonne option aussi.

    OriginalL'auteur Avi C

  5. 1
    $(".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();
    });
  }
);

    Essayer, c'est peu hackish mais fait son travail.

    OriginalL'auteur rubyonrails3