transition en douceur avec afficher/masquer les fonctions jquery sur le vol stationnaire?

Je suis en utilisant une carte-image et lorsque certaines partie de l'image est planait-il montrer div..(comme dans ce site http://jquery-image-map.ssdtutorials.com/) je veux la div à apparaître avec des transitions en douceur... voici mon code js

var mapObject = {
    hover : function(area, event) {
        var id = area.attr('name');
        if (event.type == 'mouseover') {
            $('.' + id).show();
            $('#'+ id).siblings().each(function() {
                if ($(this).is(':visible')) {
                    $(this).hide();
                }
            });
            $('#'+ id).show();
        } else {
            $('.' + id).hide();
            $('#'+ id).hide();
            $('#room-0').show();
        }
    }
};
$(function() {

    $('area').live('mouseover mouseout', function(event) {
        mapObject.hover($(this), event);
    });

});

Quelqu'un peut-il svp me suggérer des modifications pour des transitions en douceur...
merci à l'avance! 🙂

  • live est très dépassée. quelle est la version de jQuery utilisez-vous?
  • jquery-1.6.4.min.js
  • donner votre show() et hide() une durée de transition comme show(500)
  • Je veux qu'il soit indiqué pour le temps de l'utilisateur du curseur est sur cette zone! show(500) va faire disparaître aftr 500 millsec.
  • désolé j'ai mal compris!
  • pas de prob! 🙂

InformationsquelleAutor newbie | 2014-09-21
  1. 7

    Alors tout d'abord, une autre astuce - ce serait une bonne idée de mettre à jour jQuery un peu (si il n'y a pas quelque chose qui dépend de l'ancienne version que vous utilisez). live n'est pas disponible, au lieu de cela, vous aurez besoin de le remplacer avec .on, mais sinon c'est une bonne idée.

    Deuxièmement, les sons que vous cherchez est de donner hide et show certains de transition. Vous pouvez simplement remplacer par des fadeIn() et fadeOut(). Vous pouvez également utiliser toggle qui fait tout à la fois (mais risquent de mal se conduire lorsqu'il est utilisé avec un hover, parce qu'il va retourner comme une folle).

    Voici un petit extrait qui vous montre comment ils fonctionnent:

    JS:

    $(document).ready(function() {
  

  var img = $('img');
  
  $('#show').on('click', function() {
   	 img.fadeIn();
  });
  
  $('#hide').on('click', function() {
    	img.fadeOut();
  });
  
  $('#toggle').on('click', function() {
  	img.fadeToggle();  
  });
  
  
});

    CSS:

    * { font-family: sans-serif; }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="show"> Show me! </button>

<button id="hide"> Hide me! </button>

<button id="toggle"> Toggle me! </button>

<br>
<br>
<img src="http://www.randomwebsite.com/images/head.jpg" />

    Bien sûr, ce sont juste des raccourcis des fonctions qui utilisent le .animate fonctionnalité, ce qui est assez souple sur son propre. Voici un lien où vous pouvez en savoir plus sur les effets et les animations en jQuery et comment vous pouvez les utiliser

    • quand j'ai changé de méthode show() pour .fadein() et hide pour fadeout(). Il n'a pas répondu à toutes. Peut-u s'il vous plaît modifier mon code.
    • ouvrez le chrome devtools, et de regarder la console. Voyez-vous des erreurs?
    • le lien ci-dessus est encore à l'aide de show et hide. si vous souhaitez le changer pour être animé, ajouter .animate ou utilisez les raccourcis fade fonctions. Quelle est la part de qui ne fonctionne pas pour vous?
    • lisez à propos de .animate et apprendre
    • de quoi animer les fonctions peuvent être utiliser pour obtenir quelque chose comme ceci tympanus.net/TipsTricks/DirectionAwareHoverEffect
    • c'est une démo à partir d'un tutoriel qui explique exactement ce que. C'est un peu plus compliqué, mais à la base il utilise le même .animate fonctionnalité (quoique l'on utilise le plus tortueux chemin de _applyAnimation)
    • merci mais je n'ai aucune idée de comment l'intégrer dans mon code!
    • c'est ok. Vous êtes nouveau. Je ne peux pas vous donner un peu de magie réponse qui va faire de vous un expert sur le sujet, vous aurez à apprendre. Des choses compliquées comme ça, c'est encore un peu beaucoup, mais le ramasser lentement, étape par étape. Vous allez y arriver finalement
    • ok merci u 🙂

    InformationsquelleAutor yuvi
  2. 3

    Écho à ce que yuvi me l'a dit, le "live" de la fonction est obsolète.

    Je ne suis pas sûr de savoir pourquoi vous avez passez votre fonction à l'intérieur d'un objet, mais vous pouvez aussi le faire comme cela, à l'aide de fadeTo:

    JS:

    var mapObject = {
    hover : function(area, event) {
        var id = area.attr('name');
        if (event.type == 'mouseover') {
            $('#'+ id).fadeTo(1000, 1.0);
        } else {
            $('#'+ id).fadeTo(1000, 0);
        }
    }
};

$(function() {
    $('.area').bind('mouseover mouseout', function(event){
         mapObject.hover($(this), event);
    });
});

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="area" name="div1" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div class="area" name="div2" style="width:20px;height:20px;background-color:#CCC;margin:5px;"></div>
<div id="div1" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in One</div>
<div id="div2" style="width:150px;height:100px;background-color:#0F0;display:none;margin:5px;">Image Stand-in Two</div>

    InformationsquelleAutor HeadCode
  3. 1

    JS:

    function smooth(){
			if($("#show").is(":visible")){
				$("#show").hide("1000");
			}
			else{
				$("#show").show("1000");
			}
		}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href = "#" onclick = "smooth()">Click me</a><br><br>
<h1 id = "show">Shown!</h1>

    InformationsquelleAutor