你如何创建一个两列,其中一个 div 在翻转时占据整个屏幕?
问问题
66 次
1 回答
1
这是一个非常快速的示例,说明如何在 jquery 中完成此操作,如果只是为了给您一些方向:
jsfiddle
HTML
<div id="wrapper">
<div class="col one"></div>
<div class="col two"></div>
</div>
JS
$(function() {
// Mouse over div
$(".col").mouseenter(function() {
// If it's the second div, we want to move it left while making it bigger
if($(this).hasClass("two")) {
// we use .stop to stop all current animations
// Also we add an active class to put it on top
$(this).stop().addClass("active").animate({"left": "0px", "width": "98%"}, 500);
}
// otherwise we dont care, just make it bigger
else {
// Also we add an active class to put it on top
$(this).stop().addClass("active").animate({"width":"98%"}, 500);
}
});
// Mouse off div
$(".col").mouseleave(function() {
// If it's the second div, we want to move it back to 45% while making it smaller
if($(this).hasClass("two")) {
$(this).stop().animate({"left": "50%", "width":"45%"}, 500).removeClass("active");
}
else {
$(this).stop().animate({"width":"45%"}, 500).removeClass("active");
}
});
});
于 2013-04-09T16:12:48.463 回答