Return to Snippet

Revision: 25205
at March 23, 2010 09:19 by cfleschhut


Updated Code
<ul>
    <li>
        <div>
            <h3>18.03.2010 Headline</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p><a href="#">Artikel �¶ffnen</a></p>
        </div>
    </li>
</ul>


$("li").hover(function() {
    $(this).find("div").animate({
        bottom: 0,
        backgroundColor: "lightgreen"
    }, {
        duration: 300,
        easing: "easeOutCirc",
        queue: false
    });
}, function() {
    $(this).find("div").animate({
        bottom: "-40px",
        backgroundColor: "#999"
    }, {
        duration: 300,
        easing: "easeOutCirc",
        queue: false
    });
});

Revision: 25204
at March 23, 2010 09:18 by cfleschhut


Updated Code
<ul>
    <li>
        <div>
            <h3>18.03.2010 Headline</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p><a href="#">Artikel öffnen</a></p>
        </div>
    </li>
</ul>


$("li").hover(function() {
    $(this).find("div").animate({
        bottom: 0,
        backgroundColor: "lightgreen"
    }, {
        duration: 300,
        easing: "easeOutCirc",
        queue: false
    });
}, function() {
    $(this).find("div").animate({
        bottom: "-40px",
        backgroundColor: "#999"
    }, {
        duration: 300,
        easing: "easeOutCirc",
        queue: false
    });
});

Revision: 25203
at March 23, 2010 09:16 by cfleschhut


Initial Code
<ul>
    <li>
        <div>
            <h3>18.03.2010 Headline</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p><a href="#">Artikel öffnen</a></p>
        </div>
    </li>
</ul>


$("li").hover(function() {
    $(this).find("div").animate({
        bottom: 0,
        backgroundColor: "lightgreen"
    }, {
        duration: 300,
        easing: "easeOutCirc",
        queue: false
    });
}, function() {
    $(this).find("div").animate({
        bottom: "-40px",
        backgroundColor: "#999"
    }, {
        duration: 300,
        easing: "easeOutCirc",
        queue: false
    });
});

Initial URL
http://jsfiddle.net/qXqSV/3/

Initial Description

                                

Initial Title
jQuery Revealing Image Rollovers

Initial Tags
image, jquery, animation

Initial Language
jQuery