Fatal编程技术网
  • javascript/
  • Javascript 如何让jQuery从最后一个位置设置动画到新位置？

Javascript 如何让jQuery从最后一个位置设置动画到新位置？

javascript jquery

Javascript 如何让jQuery从最后一个位置设置动画到新位置？,javascript,jquery,position,jquery-animate,Javascript,Jquery,Position,Jquery Animate,我已经在Firefox和IE中使用并测试了以下代码。Firefox工作得非常完美（根据当前位置将元素移动到新位置），但IE失败了。它始终获取原始位置，然后设置动画到所需位置。Firefox的方式是我希望它的工作方式（相对于当前位置移动，而不是从原始位置移动） $（“a#pack1”）。单击（函数（）{ $（“#解决方案”）。设置动画({ “background-position-x”：“9px”， “背景位置y”：“8px” }，1000，'线性'； $（“#内容数据”）.animate（{m

我已经在Firefox和IE中使用并测试了以下代码。Firefox工作得非常完美（根据当前位置将元素移动到新位置），但IE失败了。它始终获取原始位置，然后设置动画到所需位置。Firefox的方式是我希望它的工作方式（相对于当前位置移动，而不是从原始位置移动）

$（“a#pack1”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“8px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“0px”}，1000）；
});
$（“a#pack2”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“52px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-590px”}，1000）；
});
$（“a#pack3”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“95px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-1150px”}，1000）；
});
$（“a#pack4”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“138px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-1740px”}，1000）；
});
$（“a#pack5”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“181px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-2397”}，1000）；
});
$（#pack6”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“224px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-3064px”}，1000）；
});
$（“打包7”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“268px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-3700px”}，1000）；
});
$（“a#pack8”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“311px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-4256px”}，1000）；
});
$（“a#pack9”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“350px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-4885px”}，1000）；//医疗监视
});
$（“a#pack10”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“394px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-5495px”}，1000）；//调度程序
});
$（“a#pack11”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“438px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-6110px”}，1000）；//康复提醒
});
$（“a#pack12”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“480px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-6720px”}，1000）；//成本
});
$（“a#pack13”）。单击（函数（）{
$（“#解决方案”）。设置动画({
“background-position-x”：“9px”，
“背景位置y”：“525px”
}，1000，'线性'；
$（“#内容数据”）.animate（{marginTop:“-7324px”}，1000）；//合法
})；


    

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  • 

  •
通过HTML属性传递
background-position-x
、
background-position-y
和
margin-top
值，并向链接添加一个公共类
pack
，可以节省大量代码，如下所示：

<a id="pack1" class="pack" data-position-x="9px" data-position-y="8px" data-margin-top="0px" href="javascript:void(0);">Leave</a>
最后，概括Javascript单击处理程序以检索这些属性：

$("#solutions .pack").click(function() {
  $('#solutions').css({
    'background-position-x': $(this).attr('data-position-x'),
    'background-position-y': $(this).attr('data-position-y')
  });
  $('#content-data').css('margin-top', $(this).attr('data-margin-top'));
});

$（“#solutions.pack”）。单击（函数（）{
$（“#解决方案”）.css({
'background-position-x'：$（this.attr（'data-position-x'），
'background-position-y'：$（this.attr（'data-position-y'））
});
$（'content data'）.css（'margin-top'，$（this.attr（'data-margin-top'））；
})；
#内容数据{
宽度：50px；
高度：50px；
背景色：红色；
过渡：所有1；
}
#解决方案{
背景图片：url(https://bennettfeely.com/gradients/img/gradient_24.png);
背景位置：0；
过渡：所有1s线性；
}


    

  • 

  • 

  •
通过HTML属性传递
background-position-x
、
background-position-y
和
margin-top
值，并向链接添加一个公共类
pack
，可以节省大量代码，如下所示：

<a id="pack1" class="pack" data-position-x="9px" data-position-y="8px" data-margin-top="0px" href="javascript:void(0);">Leave</a>
最后，概括Javascript单击处理程序以检索这些属性：

$("#solutions .pack").click(function() {
  $('#solutions').css({
    'background-position-x': $(this).attr('data-position-x'),
    'background-position-y': $(this).attr('data-position-y')
  });
  $('#content-data').css('margin-top', $(this).attr('data-margin-top'));
});

$（“#solutions.pack”）。单击（函数（）{
$（“#解决方案”）.css({
'background-position-x'：$（this.attr（'data-position-x'），
'background-position-y'：$（this.attr（'data-position-y'））
});
$（'content data'）.css（'margin-top'，$（this.attr（'data-margin-top'））；
})；
#内容数据{
宽度：50px；
高度：50px；
背景色：红色；
过渡：所有1；
}
#解决方案{
背景图片：url(https://bennettfeely.com/gradients/img/gradient_24.png);
背景位置：0；
过渡：所有1s线性；
}


    

  • 

  • 

  •
这是一种肮脏的黑客行为。 你可以用背景横排制作一个div的动画，比如说，里面有一个绝对div（#bg）：