JQuery: Can I use a slide app and add text at the same time?

Question

When the user changes the image, I want to slideUpdescribe so that new text appears. When the user exits, the description will be slideDown.

This is what I have tried so far:

$pic1.hover(function () {
        var text1 = $("<div>Price1:$100</div>").hide();
        text1.appendTo($('.this')).slideUp("slow");
    },function () {
        $(this).slideDown();
    }
);

Unfortunately this does not work. I googled around but couldn't find anything. Is it possible to use slideUpand slideDownto show and hide the text?

Answer 1

http://jsfiddle.net/qvbgb/3/

HTML

<div class="imgcontainer">
    <div class="image">
        <img src="link.jpg" />
    </div>
    <div class="text">
        <h3>Product name</h3>
        <p>Description</p>
    </div>
</div>

Jquery

$(document).ready(function(){
    $('.text').hide();

    $('.container').hover(
        function () {
            $(this).find('.image').slideUp(); 
            $(this).find('.text').slideDown();
        },function () {
            $(this).find('.text').slideUp();
            $(this).find('.image').slideDown();
        }
    );
})

CSS

.container{
    min-width : 150px;
    min-height : 150px;
    width : 150px;
    height : 150px;
    cursor : pointer;
    display : block;
}

.image img{
    width : 150px;
    height : 150px;
}

Answer 2

CSS. . . .

fiddle

HTML

<div class="imageDiv">
    <img src="http://placekitten.com/g/200/300" />
    <div class="imageDescription">
        What a lovely kitty kat!
    </div>
</div>

CSS

.imageDiv {
    display: block;
    float: left;
    overflow: hidden;
    position: relative;
    width: 200px;
}
.imageDescription {
    -webkit-transition: top 0.5s ease;
    -moz-transition: top 0.5s ease;
    -ms-transition: top 0.5s ease;
    -o-transition: top 0.5s ease;
    transition: top 0.5s ease;

    background: rgba(0, 0, 0, 0.4);
    color: #f7f7f7;
    left: 0;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 100%;
    width: 100%;
}
.imageDiv:hover .imageDescription {
    display: block;
    top: 93%;
}

, . -, CSS. :

transition: [property] [duration] [timing-function] [delay];

, transition, top. 0.5s ease. , . , !

, overflow: hidden; div.imageDiv. , , .

Answer 3

slideUp () will hide only the element, and slideDown () will show only the element. If you want to show an element with the slideUp effect or hide the slideDown effect, you must explicitly call it:

$(text1).show("slide", { direction: "up" }, 1000);
$(text1).hide("slide", { direction: "down" }, 1000);