fadeIn 和 fadeOut 没有按预期工作
fadeIn and fadeOut not working as expected
在我的代码中,我有一些图片,我试图将它们显示为滑块,因此当单击 clickme 按钮时,图像将更改为下一个 image.I 已成功完成此功能,但我想要动画,当我点击 clickme 按钮时,当前图像应该淡出,下一张图像应该淡入,
我做不到,
$('#allimg li:first').addClass('activeimg');
//code for like and next image
$('.clickme').on('click', function() {
var tagname = $('.activeimg img').attr('name');
if ( $('#allimg li.activeimg').index() + parseInt(1) !== $('#allimg li').length ) {
$('.activeimg').removeClass('activeimg').fadeIn().next('#allimg li').addClass('activeimg').fadeOut();
}
});
只需要一点帮助,
这里是淡入和淡出的一个非常基本的实现;
由于您的代码不完整;我创建了自己的;
希望对您有所帮助
$("button").click(function(){
$("#dog1").fadeOut("slow");
$("#dog3").fadeIn("slow");
});
#dog3 {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.pinimg.com/originals/b0/d7/08/b0d708c285de860ce5d51a8d558409dc.jpg" width ="100px" height="100px" id="dog1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" width ="100px" height="100px" id="dog3">
<button> Fade Images </button>
在我的代码中,我有一些图片,我试图将它们显示为滑块,因此当单击 clickme 按钮时,图像将更改为下一个 image.I 已成功完成此功能,但我想要动画,当我点击 clickme 按钮时,当前图像应该淡出,下一张图像应该淡入, 我做不到,
$('#allimg li:first').addClass('activeimg');
//code for like and next image
$('.clickme').on('click', function() {
var tagname = $('.activeimg img').attr('name');
if ( $('#allimg li.activeimg').index() + parseInt(1) !== $('#allimg li').length ) {
$('.activeimg').removeClass('activeimg').fadeIn().next('#allimg li').addClass('activeimg').fadeOut();
}
});
只需要一点帮助,
这里是淡入和淡出的一个非常基本的实现;
由于您的代码不完整;我创建了自己的;
希望对您有所帮助
$("button").click(function(){
$("#dog1").fadeOut("slow");
$("#dog3").fadeIn("slow");
});
#dog3 {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.pinimg.com/originals/b0/d7/08/b0d708c285de860ce5d51a8d558409dc.jpg" width ="100px" height="100px" id="dog1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" width ="100px" height="100px" id="dog3">
<button> Fade Images </button>