jQuery - rough fadeIn transition on hover

I have a div with some contents and then on hover I am trying to FadeIn another span over it while fadding out the container div. The problem after the hover the container div goes to opacity 0 then returns to the value I have set. It feels like it blinks. I need to be smooth. Here is my code: Live JSFiddle : http://jsfiddle.net/alok108/Y7hgs/28/ HTML jQuery $(function () { $(".campaign-box span:last").hide(); $(".campaign-box").hover(function () { $(".box").css("opacity", 0.5); $(".campaign-box span:last").fadeIn("fast"); }, function () { $(".box").css("opacity", 1); $(".campaign-box span:last").fadeOut("slow"); }); }); CSS .campaign-box { display: block; height: 100px; width: 200px; border: solid black; } .box { display:block; height:100%; width:100%; float:left; } .box + span { display: block; height:100%; width:100%; background: #f1f1f1 url("http://0.tqn.com/d/personalweb/1/G/w/O/FacebookLikeButton1.jpg") no-repeat; z-index:5; }
Those who are having this same issue please check @kalley's answer below and following updated fiddle jsfiddle.net/alok108/Y7hgs/33

以上就是jQuery - rough fadeIn transition on hover的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准