实现对导航菜单图像

我已经成功地实现了一个导航栏项目/图像上的slideToggle效果简单的slideToggle效果。您可以看到效果here。实现对导航菜单图像

我一直希望slideToggle将隐藏的DIV /图像直接向下滑动，而不是我看到的效果更多的是弯曲/翻转效果（我希望你跟着我！）。有没有一种方法只使用jQuery获得这种效果？

这里是CSS：

li#home { 
    background: url('images/home.png') no-repeat; 
    width: 120px; 
    height: 40px; 
} 

img.hover { 
    display: none; 
}

的HTML：

<div class="nav"> 
<ul> 
<li id="home"><a href="index.html" class=""><img src="images/home-hover.png" width="120px" height="40px" class="hover"></a></li> 
</ul>

和脚本：

$('li#home').hover(function() { 
    $('img.hover').slideToggle('medium'); 
    });

因为我不能得到这个工作，我也尝试过推行的jQuery用户界面，包括幻灯片效果和这个脚本，但我完全没有效果：

$('li#home').hover(function() { 
     $('img.hover').show("slide", { direction: "down" }, 1000); 
});

我宁愿不如果可能的话使用jQuery UI。

可能有人有帮助呢？

感谢，

尼克

来源

2011-12-11 Nick

尝试改变CSS来此：

li#home { 
    background: url('http://salliannputman.com/images/home.png') no-repeat; 
    width: 120px; 
    height: 40px; 
    position: relative; 
} 

img.hover { 
    position: absolute; 
    height: 40px; 
    display: none; 
} 

.nav { 
    background-color:#292929; 
    padding:20px; 
}

Your updated fiddle.

来源

2011-12-11 12:43:42 karim79

我已经做到了这一点，并没有做出幻灯片效果的任何差异。 – Nick

@Nick - 认为这可能是因为slideToggle被激发了两次。我编辑了我的答案。 – karim79

谢谢，但幻灯片效果看起来还是一样 – Nick

实现对导航菜单图像

回答

相关问题