Question

在一个网站中我想要摇动包含图像的div，它固定在页面的底部。我尝试添加摇动功能，它正在摇晃，但位置变化到左侧。我该如何解决？让我写下代码。

     var css_shake={
     right: '225px',
     left: 'auto',
     position: 'fixed',
     bottom:'50px'
 }
  jQuery.fn.shake = function() {
  this.each(function(i) {
  jQuery(this).css(css_shake);
    for (var x = 1; x <= 3; x++) {
        jQuery(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50);
    }
});
return this;
}

当写$（div）.shake（）时，它可以工作，但不是我想做的。

 <div  id="affix_sepet">
    <img src="img/sepet_yeni.png" height="226" width="163">
 </div>

这个div也有bootstrap词缀：jQuery（“＃affix_sepet”）。affix（）

Answer 1

     var css_shake={
     right: '225px',
     left: 'auto',
     position: 'fixed',
     bottom:'50px'
 }
  jQuery.fn.shake = function() {
  this.each(function(i) {
  jQuery(this).css(css_shake);

        jQuery(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50);
        jQuery(this).animate({ top: -25 }, 10).animate({ top: 0 }, 50).animate({ top: 25 }, 10).animate({ top: 0 }, 50);
        jQuery(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50);
        jQuery(this).animate({ top: -25 }, 10).animate({ top: 0 }, 50).animate({ top: 25 }, 10).animate({ top: 0 }, 50);
        jQuery(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50);
        jQuery(this).animate({ top: -25 }, 10).animate({ top: 0 }, 50).animate({ top: 25 }, 10).animate({ top: 0 }, 50);




});
return this;
}

Answer 2

您正在为动画使用绝对左值而不是相对值。尝试使用以下语法：

jQuery(this).animate({ left : '+=25px' }, 10).animate({ left : '-=25px' }, 10) ;

目前你在绝对位置-25到25附近弹跳元素，并将它留在左边界。

jQuery Shake打破了位置：固定

2 个答案: