課程
/前端開發(fā)
/CSS3
/按鈕特效
相當(dāng)有問題啊，第一次劃過的時候有漸變的效果，但是以后的就不行了，直接顯示，老師再給個解決方案吧。
2017-08-18
源自：按鈕特效 1-12
正在回答
$(function(){
$('.link .button').hover(function(){
var title = $(this).attr('data');
$('.tip em').text(title);
var pos = $(this).position().left + 10;
var dis = ($('.tip').outerWidth() - $(this).outerWidth())/2;
var l = pos - dis;
$('.tip').stop();
$('.tip').css({'left': l + 'px'}).animate({'top':145, 'opacity':1},300);
},function(){
$('.tip').animate({'top':100, 'opacity':0}, 500);
})
在執(zhí)行下來動畫前先執(zhí)行一個stop函數(shù)，這樣就會在鼠標(biāo)移動太快時候把前一個上去的動畫停止掉，但是這個時候就幾乎看不到下來的動畫了，算是一種解決辦法吧
第一次劃過以后opacity'已經(jīng)是1了，所以后面的直接顯示了，
舉報
WEB前端開發(fā)必備能力，課程分為二個實例講解，讓你牢牢掌握
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2018-11-04
$(function(){
$('.link .button').hover(function(){
var title = $(this).attr('data');
$('.tip em').text(title);
var pos = $(this).position().left + 10;
var dis = ($('.tip').outerWidth() - $(this).outerWidth())/2;
var l = pos - dis;
$('.tip').stop();
$('.tip').css({'left': l + 'px'}).animate({'top':145, 'opacity':1},300);
},function(){
$('.tip').animate({'top':100, 'opacity':0}, 500);
})
})
在執(zhí)行下來動畫前先執(zhí)行一個stop函數(shù)，這樣就會在鼠標(biāo)移動太快時候把前一個上去的動畫停止掉，但是這個時候就幾乎看不到下來的動畫了，算是一種解決辦法吧
2017-09-15
第一次劃過以后opacity'已經(jīng)是1了，所以后面的直接顯示了，