jQuery：是否可以同时使用slideUp和附加文本？
当用户将鼠标hover在图片上时，我想slideUp描述，以便显示新文本。 当用户将鼠标移出时，描述将为slideDown 。
这是我到目前为止所尝试的：
$pic1.hover(function () { var text1 = $("Price1:$100").hide(); text1.appendTo($('.this')).slideUp("slow"); },function () { $(this).slideDown(); } );
不幸的是，这不起作用。 我用Google搜索，但找不到任何东西。 是否可以使用slideUp和slideDown来显示和隐藏文本？
HTML
Product name
Description
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; }
更好的方法是使用CSS转换。 它们重量轻，易于操作。 您可以在此处阅读有关转换的规范。 这是关于此事的快速指南 。
小提琴
HTML
What a lovely kitty kat!
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转换。 转换以下列forms编写：
transition: [property] [duration] [timing-function] [delay];
从上面的示例中可以看出，我使用了一个针对top属性的transition 。 我给它0.5s持续时间和ease效果。 然而，仅这一点不会产生效果，因为描述只是位于图像下方并在hover时向上移动。 在用户将鼠标hover在图像上之前，我们不希望看到描述！
要解决这个问题，你需要添加overflow: hidden; 到父div.imageDiv 。 这隐藏了图像描述，直到转换，它将向上滑动，导致它不再溢出。
slideUp（）只隐藏一个元素，而slideDown（）只显示一个元素。 如果要显示具有slideUp效果的元素或使用slideDown效果隐藏，则必须显式调用它：
$(text1).show("slide", { direction: "up" }, 1000); $(text1).hide("slide", { direction: "down" }, 1000);