Question

我知道还有其他更优选的方法，但我试图使用jQuery给出一个div img反弹效果。

我正在尝试循环

 $('#downarrow').animate({bottom:'4px'});
  $('#downarrow').animate({bottom:'0px'});

任何帮助都会很棒。谢谢！

Answer 1

一个非常简单的解决方案：

function bounceUp(){
    $('#downarrow').animate({bottom:'4px'}, 1000, bounceDown);
}
function bounceDown(){
    $('#downarrow').animate({bottom:'0px'}, 1000, bounceUp);
}

bounceUp();

示例：https://jsfiddle.net/DerekL/nd8kf61s/

Answer 2

您可以将jQuery用于public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener { private Bitmap bitmap; private ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); imageView = (ImageView) findViewById(R.id.imageView); if (Intent.ACTION_SEND.equals(action) && type != null) { if ("text/plain".equals(type)) { handleSendText(intent); // Handle text being sent } else if (type.startsWith("image/")) { handleSendImage(intent); // Handle single image being sent } } void handleSendImage(Intent intent) { Uri imageUri = intent.getParcelableExtra(Intent.EXTRA_STREAM); Context context = getApplicationContext(); // try { //bitmap = MediaStore.Images.Media.getBitmap(getContentResolver() , imageUri); if (imageUri != null) { // Update UI to reflect image being shared InputStream is = getContentResolver().openInputStream(imageUri); bitmap = BitmapFactory.decodeStream(is); is.close(); //bitmap = MediaStore.Images.Media.getBitmap(getContentResolver() , imageUri); imageView.setImageBitmap(bitmap); } } catch (Exception e) { //handle exception } }或addClass。但这种方法使用css动画。

toggleClass

$(document).ready(function() {
  $('.arrow').toggleClass('upp');
});

.arrow {
  position: relative;
  bottom: 0px;
}
.upp {
  -webkit-animation: mymove 1.5s infinite;
  /* Chrome, Safari, Opera */
  animation: mymove 1.5s infinite;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 10px
  }
}
@keyframes mymove {
  0% {
    bottom: 10px;
  }
  50% {
    bottom: 0px;
  }
  100% {
    bottom: 10px
  }
}

制作jQuery动画循环

2 个答案: