Lazy attach handler

by joplomacedo

HTML

<div class="box">
    <div class="image">
        <img src="http://www.dannyst.com/blogimg/gallery-portraits-of-strangers-18.jpg" />
    </div>
    <div class="project">Title</div>
</div>

CSS

.image {
    background-image: url('http://t2.gstatic.com/images?q=tbn:ANd9GcRiOqf3suDmZVQH0r9ASC3XU9geK3svKZSqCDlVbgDP71UQ4Stq');
}

JavaScript

$('.image').one('mouseover', function () {
    var $this = $(this),
        $img = $(this).find('img');

    $this.on('mouseover', function () {
        $img.stop().animate({
            opacity: .7
        }, 200);
    }).on('mouseout', function () {
        $img.stop().animate({
            opacity: 1
        }, 600);
    });

    $this.trigger('mouseover');
});