[英]Jquery Slide Animation on hover
我正在嘗試在我的公司徽標上實現Jquery Hover功能。 我想實現這個目標:
但是,我已經實現了這一點
我使用了以下邏輯:
$(".m1").hover(function() {
dir = !dir;
r = dir? -50 : 0;
t = dir? 50 : 0;
$(".slide").stop().animate({left: r+'px'}, 300);
});
你可以在這里查看我的JS小提琴: http : //jsfiddle.net/Jiteen/xZ6Hv/任何形式的幫助或建議都會得到贊賞。
以下作為起點怎么樣? 不需要JS!
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;
}
你可以通過使用這樣的結構來實現這一點:
<div class="logo">
<div class="m1">M</div>
<div class="m3">aaa</div>
<div class="m2">M</div>
<div class="m4">aaa</div>
</div>
並通過更改.m3
和.m4
的寬度來設置它的動畫
這就是我要做的: http : //jsfiddle.net/A6vYy/ 。
請注意,如果你使用圖像而不是div,你可以跳過一些CSS。
JS
$(document).ready(function () {
$(".logo").on("mouseenter", function () {
$(this).find(".hidden").animate({width: "50px"});
}).on("mouseleave", function () {
$(this).find(".hidden").animate({width: "0px"});
});
});
HTML
<div class="logo">
<div class="part">M</div><div class="hidden">edia</div><div class="part">M</div><div class="hidden">antra</div>
</div>
CSS
.part, .hidden {
width: 50px;
height: 50px;
background: red;
display: inline-block;
font-size: 24px;
text-align: center;
vertical-align: top;
}
.hidden {
width: 0px;
overflow: hidden;
}
試試這個:
<div class="media">
<span class="big">M</span>edia
</div>
<div class="mantra">
<span class="big">M</span>antra
</div>
CSS:
.media,.mantra{
width:28px;
overflow: hidden;
float:left;
margin-left:2px;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
cursor: pointer;
}
.media:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
-ms-transition: 0.3s linear;
-o-transition: 0.3s linear;
transition: 0.3s linear;
}
.mantra:hover{
display: inline-block;
height:60px;
width:60px;
float:left;
}
.big{
font-size: 2em;
color: #ff8800;
}
工作演示: http : //jsfiddle.net/Jiteen/xZ6Hv/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.