Question

$('#mob-display-feature').css("background-image",'url('+"./images/large/1.jpg"+')');

请告诉我如何将淡入淡出效果添加到上面的jquery代码中。感谢

Answer 1

请参阅以下链接了解更多信息： http://api.jquery.com/fadein/

Answer 2

试试这段代码。只需复制，粘贴并试用即可。希望这对你有所帮助。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>fade effect</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
 <style type="text/css">
  body{
  	margin: 0;
  }

  div.myimage{
  	width: 500px;
  	height: 400px;
  	box-shadow: 1px 2px 1px black;
  	border:1px solid black;
  	
  }

  div.imge{
  	width: 100%;
  	height: 100%;
  	background-image: url(http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg);
  	background-repeat: no-repeat;
  	background-size: contain;
  	display: none;
  }
 </style>
<body>

 <div class="myimage"><div class="imge"></div></div>
 	
<script type="text/javascript">
	$(document).ready(function(){
		$(".myimage").mouseenter(function(){
			$(".imge").fadeIn(1000);
		});
	});

	$(document).ready(function(){
		$(".myimage").mouseleave(function(){
			$(".imge").fadeOut(1000);
		});
	});
</script>


</body>
</html>

＆＃13;

Answer 3

添加CSS background-image属性后，您可以使用jQuery fadeout或fadein。

您可以在回调函数中为这些效果添加其他代码（在带有// animation complete.的示例中标记），这将允许您在动画结束后执行代码。

如果您没有理由使用JS动态添加此属性，我建议您将background-image直接保留在CSS中并删除jQuery CSS代码。

#mob-display-featurey {
    background-image: url("url(http://lorempixel.com/400/200");
}

示例：

＆＃13;

// background-imag 
$('#mob-display-feature').css("background-image", "url(http://lorempixel.com/400/200/)");

// on click start animation fadeout
$("#btn").click(function() {
  $("#mob-display-feature").fadeOut("slow", function() {
    // animation complete.
  });
});

＆＃13;

#mob-display-feature {
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mob-display-feature">mob-display-feature</div>
<button id="btn" type="button">Click Me!</button>

＆＃13;

Answer 4

如果您想要动态显示图像时fadeIn效果。

HTML：

<div id="image-holder">

</div>

CSS：

#image-holder
{
  background-repeat:no-repeat;
  width:100%;
  height:500px;
  display:none;
}

JS：

$('#image-holder').css('background-image','url(http://images.freeimages.com/images/previews/859/sunset-1378816.jpg)').fadeIn("slow");

如何将淡入淡出效果添加到jquery css背景图像

4 个答案: