jquery animate（）divs打開

我想在jquery中做一個動畫：在懸停兩個div改變位置，並在mouseout上返回到他們的舊位置。（第一個div上升，第二個出現故障，那麼（鼠標出）的返回）jquery animate（）divs打開

問題：這些div會上下汽車無（我想，所有的事件發生時）

這裏我的代碼：

$(document).ready(function() { 
$("#container_wm").hover(function() { 
    $("#w").animate({ 
    marginTop: "-=100px" 
    }); 
    $("#m").animate({ 
    marginTop: "+=100px" 
    }); 
}); 

$("#container_wm").mouseout(function() { 
    $("#w").animate({ 
    marginTop: "+=100px" 
    }); 
    $("#m").animate({ 
    marginTop: "-=100px" 
    }); 
}); 

});

PS：感謝您的幫助，對不起語法錯誤

來源

2014-02-19 user3327181

歡迎的話，請問你展示你的標記，甚至更好地創造一個小提琴在http://jsfiddle.net – caramba

發表您的HTML標記 –

@ user3327181請不要將鼠標懸停，鼠標移出使用的mouseenter和鼠標離開..請檢查我的答案在下面。 –

動畫不使用懸停 ..使用的mouseenter事件。

不使用mouseout ..使用mouseleave事件。

它會解決你的問題

$(document).ready(function(){ 
    $("#parentDiv").mouseenter(function(){ 
     $(this).stop(true); 
     $("#child1").animate({marginTop:'-=100px'}); 
     $("#child2").animate({marginTop:'+=100px'}); 
    }) 
    $("#parentDiv").mouseleave(function(){ 
     $(this).stop(true); 
     $("#child1").animate({marginTop:'+=100px'}); 
     $("#child2").animate({marginTop:'-=100px'}); 
    }) 
})

它會爲你工作.. !!

來源

2014-02-19 09:15:17

@Gian這站（）不會讓任何效果再次檢查它。 –

謝謝！它的作品:) – user3327181

我們歡迎.. !!! –

這很簡單。在每個動畫過程的開始處使用此代碼。

$("#container_wm").mouseout(function() { 
    $(this).stop(true); 
    $("#w").animate({ 
    marginTop: "+=100px" 
    });

$(this).stop(true); //阻止在重複

來源

2014-02-19 09:14:13

試試這個解決方案！

的HTMl

<div id="container_wm">Hover me</div> 
<div id="w"></div> 
<div id="m"></div>

CSS

#container_wm { width:100px; height:100px; background-color:blue; color:#fff; cursor:pointer;} 
    #w { position:absolute; left:200px; top:50px; width:100px; height:100px; background:yellow;} 
    #m { position:absolute; left:200px; top:150px; width:100px; height:100px; background:green;}

代碼

$('#container_wm').mouseover(function(){ 
    $('#w').animate({marginTop:'-=100px'}); 
    $('#m').animate({marginTop:'+=100px'}); 
}).mouseleave(function(){ 
    $('#w').animate({marginTop:'+=100px'}); 
    $('#m').animate({marginTop:'-=100px'}); 
});

Demo Fiddle

來源

2014-02-19 09:19:10

檢查此jsfidle，您需要將hover更改爲mouseenter。

的javascript

$（文件）。就緒（函數（）{

'use strict'; 

var space = 15; 
$("#container_wm").mouseenter(function() { 
    $("#w").animate({ 
     top: "-=" + space + "px" 
    }); 

    $("#m").animate({ 
     top: "+=" + space + "px" 
    }); 
}); 

$("#container_wm").mouseout(function() { 
    $("#w").animate({ 
     top: "+=" + space + "px" 
    }); 

    $("#m").animate({ 
     top: "-=" + space + "px" 
    }); 
});

}）;

來源

2014-02-19 10:13:05

jquery animate（）divs打開

回答

相關問題