我正在尝试在我的公司 Logo 上实现 Jquery 悬停功能。我想实现这个:
但是,我已经实现了THIS
我使用了以下逻辑:
$(".m1").hover(function() {
dir = !dir;
r = dir? -50 : 0;
t = dir? 50 : 0;
$(".slide").stop().animate({left: r+'px'}, 300);
});
你可以在这里查看我的 JS Fiddle:http://jsfiddle.net/Jiteen/xZ6Hv/ 感谢任何形式的帮助或建议。
最佳答案
以下作为起点如何?无需 JS!
Demo Fiddle
HTML
<div>
<div href="#" class="word" data-text="edia">M</div>
<div href="#" class="word" data-text="antra">M</div>
</div>
CSS
.word {
display:inline-block;
font-size:1em;
line-height:1;
position:relative;
font-size:50px;
}
.word:first-child {
color:orange;
}
.word:last-child {
color:grey;
}
.word:after {
content:attr(text);
position:relative;
display:inline-block;
overflow:hidden;
max-width:0;
color:black;
font-size:20px;
transition:max-width .5s ease-in;
}
div:hover .word:after {
max-width:40px;
}
关于javascript - 悬停时的 Jquery 幻灯片动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23222101/