jQuery：是否可以同时使用slideUp和附加文本？ [英] jQuery: Is it possible to use slideUp and append text at the same time?

问题描述

当用户将鼠标悬停在图片上时，我想要 slideUp 描述，以便显示新文本。当用户将鼠标移出时，描述将 slideDown 。

When a user mouses over a picture, I want to slideUp a description, so that new text will appear. When the user mouses out, the description will slideDown.

这是我到目前为止所尝试的：

This is what I've tried so far:

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

不幸的是，这不起作用。我用Google搜索，但找不到任何东西。是否可以使用 slideUp 和 slideDown 来显示和隐藏文本？

Unfortunately, this doesn't work. I googled around, but couldn't find anything. Is it possible to use slideUp and slideDown to show and hide the text?

推荐答案

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;
}

这篇关于jQuery：是否可以同时使用slideUp和附加文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！