我有一個包含主要內容的div容器的網頁,裏面有一個div,當我將鼠標放在容器中時應該出現這個div。這是我試過的代碼:JQuery animate div條目
var running=0;
var running2=0;
$('div.container').mouseenter(function()
{
if (running==0)
{
running=1;
$('div.rightcontainer').css("margin-right",-350)
.animate({marginRight:0}, 750, function(){running=0;});
}
}
);
$('div.container').mouseleave(function() {
if (running2==0) {
running2=1;
$('div.rightcontainer').css("margin-right",0)
.animate({marginRight:-350}, 750, function(){running2=0;});
}
});
此代碼:
$('div.container').mouseenter(function() {
console.log('trigger');
$("div.rightcontainer")
.css("visibility","visible")
.css("margin-right",-$("div.rightcontainer").width())
.animate({
marginRight:0
}, 1200);
});
$('div.container').mouseleave(function() {
console.log('leave');
$("div.rightcontainer")
.css("visibility","visible")
.css("margin-right", "320")
.animate({
marginRight:-350
}, 1200);
});
然而,問題是,如果鼠標進入多次,對象不斷進入和退出。
編輯:
的。一()只做一次,我的意思是在某種程度上,它棧所有的進入和退出,並執行許多次的動畫。
.stop()解決方案效果更好,但動畫會從任何地方跳到最後。如果有一種方法可以讓鼠標離開容器的中間動畫,讓動畫片停止它的位置並以另一種方式回放動畫?
這是一個帶有簡化版本的網站的JSFiddle。容器是導航欄下的任何東西。 http://jsfiddle.net/yEzXp/
這是問題的類型應該總是用[的jsfiddle(http://www.jsfiddle.net) –
好吧,我會記在心裏。謝謝,我不知道JS小提琴。 – murtaza64