鼠标滑过显示下一页，能给解释一下这段代码吗？

Question

var time;

$(".bannerR .item a").hover(function(){

  var index=$(this).index();

  var num=index*69;

  var ddd=$(this);

  time=setTimeout(function(){

    $(".bannerR span").removeClass("spanHover");

    ddd.find("span").addClass("spanHover");

    $(".bannerR i").css({display:"none",top:18,opacity:0});

    ddd.find("i").css({display:"block"}).animate({top:23,opacity:1},600);

    $(".hong").delay(200).stop().animate({left:num-110},200);

    $(".shipin").hide().eq(index-2).show();

  },400);

},function(){

  clearTimeout(time);

});

Answer 1

$(".bannerR  .item a") 这个是jq的类选择器，里面还包含了一个层次选择器，在css 里面 .bannerR,.item { }来表示两个类共有样式。 $(".bannerR  .item")  比如 <div class="bannerR"></div> <div class="item"></div>  ,$(".bannerR  .item") .hover 就是指这两个div的jq hover效果；$(".bannerR  .item a") 就是包含了层次选择器 应该是 .bannerR  和 .item a ; var index=$(this).index() 是索引从 0开始， time=setTimeout 就是延迟加载效果 里面就执行的就是一坨jq动画效果 ；function(){  clearTimeout(time);});就是hover的回调事件  jq .hover  就 类似css的hover。不懂的再去看下jq，大概就这样子