要实现图片的翻牌旋转特效很简单：主要难点在图片的选择和文本的显示。我们需要用的jq的选择器，常用的选择器有：
$("*") //选取全部元素
$("#demo")//选取id为demo的元素
$(".active") //选取class为active的元素。
$("p first") //p的第一个元素常用的查找方法有：
prev(expr) //查找前一个同辈元素
slibings(expr) // 查找所有的同辈元素
find() //搜索下面的元素。知道这些jq代码就很轻松可以解决：
<script>
! function ($) {
$('.bd-box li').hover(function () { //对bd-box下面的li进行hover操作
let $img = $(this).find('img'); // 搜索li下面的img(全部)
$img.animate({ //动画效果
height: 0,
top: 38
}, function () { //回调函数
$img.hide();
$img.next().show().animate({ //next().show();显示img同级的span
height: 75,
top: 0
})
});
}, function () {
let $span = $(this).find('span');
$span.animate({
height:0,
top:38
},function(){
$span.hide();
$span.prev().show().animate({
height: 75,
top: 0
});
})
});
}(jQuery);
</script>
