Увеличение img

Увеличение при наведении мыши

by blancod

HTML

<ul>    
<li><img src="http://copypast.ru/uploads/posts/1218050576_image00001.jpg" class="f-r" />text text text text text text text text text text text text text text text text text text text text text text </li>
<li><img src="http://ru.fishki.net/picsw/042009/30/bonus/kitty/004_kitty.jpg" class="f-r" />text text text text text text text text text text text text text text text text text text text text text text </li>
<li><img src="http://ru.fishki.net/picsw/042009/30/bonus/kitty/013_kitty.jpg" id="picture" class="f-r" />text text text text text text text text text text text text text text text text text text text text text text </li>
<li><img src="http://doseng.org/uploads/posts/2008-09/1221463151_cat_01.jpg" class="f-l" />text text text text text text text text text text text text text text text text text text text text text text </li>
<li><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-VVYIs6o4-qAl2F-Q6yaQxYf1yaNd3HpRXWBYarHWHmo5gnxg_A" class="f-l" />text text text text text text text text text text text text text text text text text text text text text text </li>
<li><img src="http://votrube.ru/uploads/posts/2009-05/1241301872_kotjatki-%28www.votrube.ru%291.jpg" class="f-l" />text text text text text text text text text text text text text text text text text text text text text text </li>
</ul>

CSS

img {
    width: 100px;
    height: auto;
    margin: 0 5px;
}
.f-r {
    float:right;
    margin:0.3em 0 1em 1em;
}
.f-l {
    float:left;
    margin:0.3em 2em 1em 0;
}
li {
    position: relative;
    display: block;
    float:left;
    width:200px;
}

JavaScript

$(function() {
    $("img").mouseenter(function() {
        var
        self = this,
            clone = self.__clone = self.__clone || $(self).clone(false);

        $(self).before(clone);

        clone.css({
            position: "absolute",
            "z-index": 1000
        }).stop().animate({
            width: "300px",
            marginLeft: "-100px"
        }, {
            duration: 100
        }).mouseleave(function() {
            clone.stop().animate({
                width: "100px",
                marginLeft: "0px"
            }, {
                duration: 100,
                complete: function() {
                    $(this).remove();
                    self.__clone = null;
                }
            });
        });
    });
});