Ankündigung

Einklappen
Keine Ankündigung bisher.

fadeOut beim Mouseover

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • fadeOut beim Mouseover

    Hallo zusammen,
    ich nutze folgendes js um eine Hilfetabelle anzeigen zu lassen, sobald man über eine bestimmte Tabellenspalte geht...
    Das klappt auch super.

    Nun möchte ich aber, dass der Hilfebereich erst mit einer kurzen Verzögerung angezeigt wird... Das genau krieg ich nicht hin

    Code:
    var hilfeOffset = 3;
    
    $(document).ready(function(){
    	$(".item").mouseover(function(){
    		var helpEl = "#" + $(this).data("hilfe");
    		
    		var posX = ($(this).position().left + hilfeOffset);
    		var posY = ($(this).position().top + hilfeOffset);
    		var width = ($(this).width() - hilfeOffset - 1);
    		
    		var popupHeight = $(helpEl).height();
    		var maxHeight = posY + popupHeight;
    		var itemHeight = $(this).height();
    		var docHeight = $(document).height();
    		
    		
    		if(maxHeight > docHeight){
    			posY = posY - popupHeight + itemHeight + hilfeOffset;
    		}
    		
    		$(helpEl).show();
    		$(helpEl).css({
    			"top": posY+"px",
    			"left": posX+"px",
    			"width": width+"px"
    		});
    	});
    	
    	$(".item").mouseout(function(){
    		$(".hilfe").hide();
        
    	});
    	
    	$(".hilfe").mouseover(function(){
    		$(this).show();
        $(this).fadeOut(200);
        
    	});
    	
    	$(".hilfe").mouseout(function(){
    		$(this).hide();
        
    	});
    });
    Mit den Werten:
    $(this).fadeOut(200);
    $(this).fadeIn(200);
    habe ich schon unterschiedlichst "gespielt".
    Bin denn damit überhaupt richtig unterwegs? Der Effekt kommt, jedoch nicht so, dass es nach "Zeitverzögerung" aussieht - vielmehr sieht es nach "langsam reinzoomen" aus (was ich "fade" auch zurechnen würde...)

    Habt Ihr eine Idee?

    Danke und Gruss


  • #2
    Meinst du dass nach x Sekunden (bzw. Millisekunden) eine Hilfstabelle aufpappt?

    fadeIn bzw, fadeOut sind Animationsmethoden, die die Objekte in einer bestimmten Zeitspanne erscheinen lassen.

    Einfaches zeigen wäre mit show realisierbar und die Verzögerung mit http://api.jquery.com/delay/

    Kommentar


    • #3
      Timeout?

      Kommentar


      • #4
        Also, delay funktioniert nicht wirklich - jedenfalls, wenn ich es so einbaue;

        Code:
        $(this).delay( 750 );
         $(this).show();]
        und Timeout hab ich so eingebaut:
        Code:
        $(".hilfe").mouseover(function(){
        	
            $(this).show();
            
                
        	}, 750);
        oder auch mal hier
        Code:
        ....
        	$(".hilfe").mouseout(function(){
        		$(this).hide();
            
        	});
        }, 750);
        Leider nix...

        Kommentar


        • #5
          leider nichts super konkret.
          ich versteh auch dein this konstrukt nicht, macht aber nichts.

          Kommentar


          • #6
            Code:
            $(this).delay(750).show()

            Kommentar

            Lädt...
            X