Question

我有一个简单的jquery代码。单击图标，它会使用以下代码更改背景图像：

$('div').css({'background-image':'url()'});

如何使用动画？我搜索谷歌，但没有找到任何帮助我的东西。

Answer 1

如果你想fadeIn，可以通过jquery和CSS来完成。我以一种可以在动态情况下使用的方式完成它，你只需要在jquery中更改背景图像，它就可以完成所有操作，也可以在CSS中更改时间。

HTML：

<div class="test">

CSS：

.test {
  /* as default, we set a background-image , but it is not nessesary */
  background-image: url(http://lorempixel.com/400/200);
  width: 200px;
  height: 200px;
  /* we set transition to 'all' properies - but you can use it just for background image either - by default the time is set to 1 second, you can change it yourself*/
  transition: linear all 1s;
  /* if you don't use delay , background will disapear and transition will start from a white background - you have to set the transition-delay the same as transition time OR more , so there won't be any problems */
  -webkit-transition-delay: 1s;/* Safari */
  transition-delay: 1s;
}

JS：

$('.test').click(function() {
  //you can use all properties : background-color  - background-image ...
  $(this).css({
    'background-image': 'url(http://lorempixel.com/400/200)'
  });
});

我不认为这可以使用jQuery的animate函数来完成，因为背景图像没有必要的CSS属性来进行这种淡化。 jQuery只能利用浏览器的功能。

此外，您可以尝试将背景图像定位作为动画方法。 https://snook.ca/archives/javascript/jquery-bg-image-animations

演示：https://snook.ca/technical/jquery-bg/

Answer 2

    $("div").css({'background-image': 'url(http://lorempixel.com/400/200)'}).animate({height: '300px', opacity: '0.4'}, "slow").animate({width: '300px', opacity: '0.8'}, "slow");

这是一些jquery方法链接。

JQuery后台过渡效果

2 个答案: