gpt4 book ai didi

javascript - 研究 Jquery 中的 Animate()。

转载 作者:太空宇宙 更新时间:2023-11-04 03:49:28 26 4
gpt4 key购买 nike

在 Main Wrapper 中,我有 5 个 Div。第一个 div 包含 4 个 Box(box_1, box_2,box_3,box_4),我的点击事件将在其中发生。

另外4个div在main wrapper里面,分别是box_1, box_2, box_3, box_4的内容。所有框都包含一个带有唯一 ID 的超链接标记,以移回第一个 div。

第一次,当我点击任何菜单时,相应的框容器出现。

例如,点击红框 > 移动到 Box-1 内容 > 点击返回菜单 > 移动到 4 彩色框部分。

再次点击 Gany 框。比方说,绿色框 > 移至 Box2 容器 > 单击返回菜单 > 糟糕!!!我的 4 色盒子从我的屏幕上滑出。

这是 JS Fiddle 链接。我希望 4 色 div 部分保留在屏幕上。

http://jsfiddle.net/swapnaranjita_nayak/8XcZX/

## HTML ##

<div class="main_wrapper" id="main_wrapper">
<div class="container_fluid" id="menu">
<div class="wrapper">
<div class="row">
<div class="box1" id="box_1"></div>
<div class="box2" id="box_2"></div> <div class="clear"></div>
</div>

<div class="row">
<div class="box3" id="box_3"></div>
<div class="box4" id="box_4"></div> <div class="clear"></div>
</div>

</div>
</div><!---End of Container fluid--->

<div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
<h1>Box1 Content</h1>
<a href="#" id="back1">Back to #Menu</a>
</div>
<div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
<h1>Box2 Content</h1>
<a href="#" id="back2">Back to #Menu</a>
</div>
<div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
<h1>Box3 Content</h1>
<a href="#" id="back3">Back to #Menu</a>
</div>
<div class="container_fluid" id="box_4_sec" style="display:none;margin-right:-170px;">
<h1>Box4 Content</h1>
<a href="#" id="back4">Back to #Menu</a>
</div>
</div>

CSS

.container_fluid {
width:100%;
}
.wrapper {
width:1208px;
margin:auto;
}
.row {
padding:3% 3% 3% 3%;
}
.box1 {
height:100px;
width:100px;
background-color:red;
margin-right:2%;
float:left;
}
.box2 {
height:100px;
width:100px;
background-color:green;
margin-right:2%;
float:left;
}
.clear {
clear:both;
}
.box3 {
height:100px;
width:100px;
background-color:black;
margin-right:2%;
float:left;
}
.box4 {
height:100px;
width:100px;
background-color:brown;
margin-right:2%;
float:left;
}

JS

$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});

}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {

$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"+=150%"
},
{
duration: 500,
step: function() {

},
complete: function() {
console.log("finished");
}
});
}
});
});
});

最佳答案

 "marginRight":"+=170%"

每次添加 170% 或:

"marginLeft":"-=150%"

减少 150% ,这应该设置,而不是增加或减少该值。

http://jsfiddle.net/prollygeek/8XcZX/1/

$("#box_1,#box_2,#box_3,#box_4").click(function(){
var clicked_id=$(this).attr('id');
var menu=$('#menu');
menu.animate({
"marginLeft":"-=150%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
// console.log("finished");
menu.hide();
$("#"+clicked_id+"_sec").show();
$("#"+clicked_id+"_sec").animate({
"marginRight":"+=170%"
},
{
duration: 500,
step: function() {
//console.log( "width: ", i++ );
console.log($(this).width());
},
complete: function() {
console.log("finished");
}
});

}
});
$("#back1,#back2,#back3,#back4").click(function(){
alert($(this).attr('id'));
$("#"+clicked_id+"_sec").animate({
"marginRight":"-=170%"
},
{
duration: 500,
step: function() {
console.log($(this).width());
},
complete: function() {

$("#"+clicked_id+"_sec").hide()
menu.show();
menu.animate({
"marginLeft":"0%"
},
{
duration: 500,
step: function() {

},
complete: function() {
console.log("finished");
}
});
}
});
});
});

关于javascript - 研究 Jquery 中的 Animate()。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23593498/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com