jQuery Hover Animation

Ich möchte einen Hover-Effekt auf Div-Boxen, kann bis zu 60 Felder auf einer Seite sein. Es sollte dem CSS-Hover-Effekt durchaus gleich sein, aber ich möchte einen Fade-Effekt auf die Hover-Farbe anwenden. Z.B. Ich habe hellgrün als Hintergrundfarbe und dunkelgrün als Hintergrundfarbe schweben, dann sollte es von der einen auf die andere Seite verblassen. Ich habe nicht viel Erfahrung mit jQuery, aber es sieht aus wie nur ein Copy-and-Paste-FehlerjQuery Hover Animation

$(".box").hover(function() { 
     $(this).animate({ backgroundColor: "#68BFEF" }, 1000); 
    },function() { 
     $(this).animate({ backgroundColor: "#68BFEF" }, 500); 
    });

Quelle

2010-12-16 Lost in OWL

Sie müssen eine decent color plug-in verwenden. Weitere Informationen finden Sie unter jQuery animate backgroundColor.

Auch wird Ihr ursprünglicher Code nicht wirklich etwas tun, da Sie wollen, dass es danach zu einer anderen Farbe animiert.

$(".box").each(function() { 
    $(this).data('baseColor',$(this).css('color')); 
    $(this).hover(function() { 
    $(this).animate({ backgroundColor: "#68BFEF" }, 1000); 
    },function() { 
    $(this).animate({ backgroundColor: $(this).data('baseColor') }, 500); 
    }); 
});

EDIT: http://jsfiddle.net/eHXNq/2/ zum Beispiel sehen.

Quelle

2010-12-16 07:26:20 Fred

dies. +1 für den Link zu einer geeigneten Lösung –

wenn ich die Box schwebe ich bekomme eine andere bgcolor wie erwartet, aber wenn ich die Box verlassen, sollte die Farbe wieder auf den Standard zurück und das funktioniert noch nicht ... –

Können Sie etwas HTML posten/CSS? Vielleicht in einem Spiel? – Fred

spielte ich ein bisschen herum mit jQuery, aber das Ergebnis bekommen konnte, was ich wollte Da Sie die gleiche Farbe in beiden haben .animate() s

Quelle

2010-12-16 07:21:19 MatrixFrog

jQuery nicht durch Standard-Farb transitioning tun können, und das ist das Problem. – Fred

Ich glaube, Sie verwenden nicht die hover Funktion wie Sie sollten. Die zweite Funktion wird verwendet, wenn der Benutzer die Box verlässt, damit Sie zur ursprünglichen Farbe zurückkehren sollten.

Weiß zum Beispiel:

$(".box").hover(function() { 
     $(this).animate({ backgroundColor: "#68BFEF" }, 1000); 
    },function() { 
     $(this).animate({ backgroundColor: "#FFFFFF" }, 500); 
    });

Quelle

2010-12-16 07:21:25 RageZ

-1

60 Boxen? Bitte verwenden Sie die Ereignisdelegierung oder live.

Quelle

2010-12-16 07:22:32 Mark

der Selektor wird sie alle fangen ... – RageZ

denke, dies sollte ein Kommentar sein, da es nicht wirklich die Frage beantwortet. Ich stimme jedoch zu. .delegate() ist eine schöne Sache. –

@RageZ, es geht nicht darum, sie alle zu fangen, sondern die Verbreitung von Ereignissen in der Dom. Sie möchten nicht, dass 120 Ereignisse herumlaufen, die alle dasselbe tun, wenn zwei delegierte Ereignisse dasselbe bewirken könnten. –

$(".box").hover(
    function() { 
// this is mouseover 
    }, 
    function() { 
// this is mouse out 
    } 
);

siehe Beispiel hier

http://jsfiddle.net/krRse/

Quelle

2010-12-16 07:27:43 kobe

Bewertung dieser Code, ich denke, das Ihnen helfen könnte !!! Auch

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    ul { margin-left:20px; color:blue; } 
    li { cursor:default; } 
    span { color:red; } 
</style> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
</head> 
<body> 
    <ul> 
    <li>Milk</li> 
    <li>Bread</li> 
    <li class='fade'>Chips</li> 

    <li class='fade'>Socks</li> 
    </ul> 
<script> 
$("li").hover(
    function() { 
    $(this).append($("<span> ***</span>")); 
    }, 
    function() { 
    $(this).find("span:last").remove(); 
    } 
); 



//li with fade class 
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);}); 

</script> 

</body> 
</html>

einen Blick auf diesen Link, http://api.jquery.com/hover/

Quelle

2010-12-16 07:32:41 harishtps

jQuery Hover Animation

Antwort

Verwandte Themen