Question

我正在使用此代码将面板和图像名称滑出图像下方：

$( ".image-wrapper a" ).on 'mouseenter', ->
    $(this).next('.panel').animate
      bottom: "-40px"
    , 300
    return

  $( ".image-wrapper a" ).on 'mouseleave', ->
    $(this).next('.panel').animate
      bottom: "0px"
    , 300
    return

现在当我鼠标悬停在.panel上时，由于a标签上的mouseleave事件，它会向上滑回。

如何在a标签的鼠标中心和面板上保持面板打开并保持mouseleave事件的行为？

这是一个小提琴

http://jsfiddle.net/d5e40mw8/4/

Answer 1

尝试使用此代码：咖啡脚本：

$(".image-wrapper img,.panel").mouseenter ->
  $(".panel").stop().animate
    bottom: -40
  , 300
  return

$(".image-wrapper img,.panel").mouseleave ->
  $(".panel").stop().animate
    bottom: 0
  , 300
  return

输入＆＃34; .image-wrapper IMG＆＃34;和＆＃34; .panel＆＃34;元素将动画＆＃34; .panel＆＃34; （我将.stop（）添加到动画中以避开一些动画错误）。如果你留下这些元素＆＃34; .panel＆＃34;会再次隐藏。

鼠标悬停时可以看到动画元素

1 个答案: