[英]animating image change with jQuery
我试图从div中为img
更改添加动画,并且尝试使用jquery这样做,因为这似乎是最干净的方法。 我尝试使用此答案,但没有成功。 我的方法哪里出错了?
HTML:
<div class="jumbotron text-center" id="main-jum">
<img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
</div>
<div class="container-fluid text-center d-none d-md-block" id="jum-btns">
<div id="jum-btn" class="btn-group " role="group" aria-label="Basic example">
<button type="button" id="btn-left" class="btn btn-secondary jum-btn" onclick="changeColor();">Left</button>
<button type="button" id="btn-middle" class="btn btn-secondary jum-btn" onclick="changeColor();">Middle</button>
<button type="button" id="btn-right" class="btn btn-secondary jum-btn" onclick="changeColor();">Right</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#btn-left').click(function() {
$('#jum-img').fadeOut(500, function() {
$('#jum-img').attr("src","https://truffle-assets.imgix.net/pxqrocxwsjcc_5pcvIMJdpmi8COGYQ0kua6_churros-with-dulce-de-leche_landscapeThumbnail_en-US.jpeg");
$('#jum-img').fadeIn(500);
});
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
您正在调用“#jum-Img”,但您的ID实际上是“#jum-img”,将I更改为小写字母后,您的代码就可以工作了。
很简单。 只需将所有js和脚本放在HTML代码之前。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#btn-left').click(function() {
$('#jum-img').fadeOut(500, function() {
$('#jum-img').attr("src","https://truffle-assets.imgix.net/pxqrocxwsjcc_5pcvIMJdpmi8COGYQ0kua6_churros-with-dulce-de-leche_landscapeThumbnail_en-US.jpeg");
$('#jum-img').fadeIn(500);
});
});
});
</script>
<div class="jumbotron text-center" id="main-jum">
<img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
</div>
<div class="container-fluid text-center d-none d-md-block" id="jum-btns">
<div id="jum-btn" class="btn-group " role="group" aria-label="Basic example">
<button type="button" id="btn-left" class="btn btn-secondary jum-btn" onclick="changeColor();">Left</button>
<button type="button" id="btn-middle" class="btn btn-secondary jum-btn" onclick="changeColor();">Middle</button>
<button type="button" id="btn-right" class="btn btn-secondary jum-btn" onclick="changeColor();">Right</button>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.