Advanced Search

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