Erstellen eines einfachen jQuery-Gleiteffekts, wenn Sie den Mauszeiger über ein Bild bewegen

Question

Wie kann ich diesen einfachen jQuery-Effekt erstellen, wenn jemand über ein Bild auf meiner Seite schwebt?

Ein JSFiddle-Beispiel can be found here.

Ich möchte, wenn jemand das Bild oder einen Teil der Box betritt, sollte der Textbereich erweitern, um mehr Details verraten.

Beim Verlassen der Maus sollte der Textbereich schrumpfen und nur das Bild sichtbar machen.

Hier ist mein Versuch:

$("#free-roster .roster-container .champion").mouseenter(function() { 
    $(this).find(".info").animate({ width: "116px" }, 400); 
}); 

$("#free-roster .roster-container .champion").mouseleave(function() { 
    $(this).find(".info").animate({ width: "0px" }, 400); 
}); 

Answer 1

Dieses jQuery funktioniert für mich:

$("#free-roster .roster-container .champion").mouseenter(function() { 
    $(this).find(".info").animate({ width: "116px" }, 400); 
}); 

$("#free-roster .roster-container .champion").mouseleave(function() { 
    $(this).find(".info").animate({ width: "0px" }, 400); 
}); 

$("#free-roster .roster-container .champion").mouseleave(); 

In Ihrem CSS add:

color: white; 

zu:

#free-roster .roster-container .champion .info 

http://jsfiddle.net/9EFsE/1/