sur le vol stationnaire faites glisser le panneau de droite et mouseout glisser vers l'arrière

Salut les gars, j'ai essayé ce que vous m'avait donnés.. mais quel mal fais-je
voir mon violon

http://jsfiddle.net/cancerian73/Ej5k8/

 body {

position: relative;
min-height: 3000px;
margin: 0;
padding: 0;
top: 0;
font-family:'proximanova-regular', sans-serif;
 }

lorsque vous passez la souris sur le bouton en haut à droite de la silde garder le scintillement et non pas comme dans l'exemple que je veux sur http://yahoo.tumblr.com/

  • Que voulez-vous faire sur la souris ?
  • c'est l'effet im essayant d'atteindre yahoo.tumblr.com placez votre souris sur tumblr bouton en haut à droite
InformationsquelleAutor San | 2013-12-08
  1. 8

    Pourquoi ne pas le faire en pure CSS?

    CSS:

    * { margin: 0; }

#panel {
  position: fixed;
  background: #444;
  color: #fff;
  height: 100%;
  width: 300px;
  right: -300px;
          transition: right 0.4s ease-in-out;
  -webkit-transition: right 0.4s ease-in-out;
}
#panel:hover {
  right: 0px;
}

#panelCaller {
  position: absolute;
  top: 50px;
  right: 300px;        /* same as #panel width */
  background: #444;
}

    HTML:

    <div id="panel">

  <div id="panelCaller">OPTIONS</div>

  <h2>Panel</h2>
  <p>Content...</p>
  
</div>

    Sinon en jQuery: http://jsfiddle.net/vVSJz/156/

    var $pCont = $("#panel-content");
$pCont.width(0);
$("#panel").hover(function(ev){
    $pCont.stop().animate({width: ev.type=="mouseenter" ? 500 : 0}, 700);
});
    InformationsquelleAutor Roko C. Buljan
  2. 1

    Il y a plusieurs approches, l'une d'entre elles est d'utiliser jquery mouseleave de la même manière que vous avez utilisé mouseenter.
    Donc en conjonction avec votre code, vous pouvez essayer ce qui suit,

    http://jsfiddle.net/PrN9g/

    $("#panel-tab").mouseenter(function (event) {
                $('#panel-content').stop(true,true);
                $("#panel-tab").stop(true);
                event.stopPropagation();
                showIfNotVisible("#panel-content");
            });
            $('#panel-content').mouseleave(function(){
                $("#panel-tab").stop(true,true);
                $('#panel-content').stop(true);
                                    hideIfNotHidden(this);                 

                                                     });
    InformationsquelleAutor melc
  3. 1

    Vous pouvez utiliser jQuery survolez pour quelque chose de si simple

    DÉMO http://jsfiddle.net/vVSJz/154/

    $("#panel").hover(function(){
    $("#panel-content").animate({width: '600'}, 500);
  },function(){
  $("#panel-content").animate({width: '30'}, 500);
});

    ÉDITÉ

    Pour arrêter l'effet repating utilisation .stop() après le dernier appel.

    $("#panel").hover(function(){
        $("#panel-content").animate({width: '600'}, 500);
      },function(){
      $("#panel-content").animate({width: '30'}, 500);
      $("#panel-content").animate({width: '30'}, 500).stop();
    });

    DÉMO http://jsfiddle.net/vVSJz/158/

    • si j'ai de pointage et de quitter à plusieurs reprises qu'il ne l'animation pour une longue ti,e. Je sais ou besoin d'utiliser quelque chose qui s'appelle .stopPropagation la manière de l'utiliser
    • Utilisation .stop() DÉMO jsfiddle.net/vVSJz/158
    InformationsquelleAutor Kevin Lynch
  4. 0

    D'accord Édité ma réponse et a ajouté de l'animation, qui est lisse. Prendre un coup d'oeil.
    Je savais que je faisais quelque chose de mal.

    Violon

    JS:

      $(function () {
        $("#panel-content").hide();

        $("#panel-tab").mouseenter(function () {
            $("#panel-content").show();
            $("#panel-content").animate({width:'300px'},'slow');
            $(this).addClass("hidden");
        });

     $("#panel-content").mouseleave(function() {
        $(this).animate({width: "1px"}, "slow", function()
        {
            $("#panel-tab").removeClass( "hidden" );
            $(this).hide();
        });
     });

    });

    *CSS

      .hidden{
    display:none;
   }

    En bref, vous avez oublié le mouseleave function. Aussi, je suggère de nettoyage de votre code et supprimer des choses inutiles qui ne sont pas nécessaires.

    InformationsquelleAutor Ani