change image source using javascript onclick with effect
Question
I want to change the source of image with javascript,along with some effect like fadeout() or something like that.But I need to change source for more than one image,say 3 images,with fade effect or any other effect. HOW?? Below is the code i'm using but its only for 2 images how do i use for multiple images:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<script src="jquery-1.5.1.js"></script>
</head>
<style>
body{
background:url(big-image.jpg);
background-size:100% auto;
background-repeat:no-repeat;
}
#a{
width:15%;
height:25%;
position:static;
}
#b{
width:50%;
height:45%;
display:none;
left:10%;
}
</style>
<body>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
<h2 align="center">
<img src="1.png" width="15%" height="31%" class="cat" id="a">
</h2>
<h3 align="center">
<img src="2.png" id="b" class="cat">
</h3>
</div>
<script type="text/javascript">
$(function(){
$("input:button").click(function(){
$(".cat").fadeToggle("slow");
});
});
</script>
</body>
</html>
4 answers
solution1
2 ACCPTED 2015-07-01 06:59:58
yea,fade it and another image comes up...neednt be any classy effects,even simple fade or slide would do.Is there any demo available
ok,the result must be like an image carousel,on click it should keep fading in
Try utilizing .fadeToggle() , .prependTo() , .show() to cycle effect of fading out, fading in img elements within .frame container
$(function() { $("input:button").click(function() { $("img:last").fadeToggle("slow", function() { $(this).prependTo(".frame").show() }); }); });
.frame { position: relative; left: 35%; width: 150px; height: 150px; } img { position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1> <input type="button" value="Click here" /> </h1> <div class="frame"> <img src="http://lorempixel.com/150/150/cats" /> <img src="http://lorempixel.com/150/150/technics" /> <img src="http://lorempixel.com/150/150/nature" /> <img src="http://lorempixel.com/150/150/animals" /> </div>
solution2
0 2015-07-01 06:51:23
By:@kmsdev say "you should consider to use an updated version of jQuery"
I suggest you also use the power of CSS3
$(function(){
$("input:button").click(function(){
$(".cat").css("filter","blur(6px)");
});
});
When you can give a tour of these links:
solution3
0 2015-07-01 06:58:01
Something like this? jQuery's .each() loops through all elements with a specific class. .attr() changes attribute, in this case src .
References:
http://api.jquery.com/animate/
$('button').click(function(){ $('.image').each(function(){ $(this).animate({ opacity: 0 }, 300, function(){ $(this).attr('src', 'http://www.spacecitynerd.com/launch/wp-content/uploads/2014/06/gaben.png'); }); $(this).animate({ opacity: 1 }, 300); }); });
img{ width: 300px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button>Click me</button><br> <img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image"> <img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">
solution4
0 2015-07-01 08:48:15
Previous exemple missed to listen when image is ready (loaded) before display it back.
If you want a fadeOut/In:
// Trigger action on click (or something else)
$("img").on("click", function(){
// Store element to access it faster
var $this = $(this);
// Animate to hide it
$this.animate({
opacity: 0
}, {
// When completely transparent
complete: function(){
// Add load event to know when img is ready (loaded)
$this.on("load", function(){
// Show new image
$this.animate({
opacity: 1
});
});
// Set to image to start loading
$this.attr("src", "newurl");
}
});
});
If you want a blur, simply change opacity in animate block by : transform: "blur(0px)" and transform: "blur(10px)" You may have to add prefix for non-Chrome browsers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.