change image source using javascript onclick with effect

问题

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>

回答1:

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>

回答2:

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:

http://www.desarrollolibre.net/blog/tema/74/html5-css-js/el-filtro-blur-desenfoque-en-css-y-alguno-de-sus-posibles-usos#.VZOM3e1_NHw

http://codepen.io/libredesarrollo/full/xIHda

回答3:

Something like this? jQuery's .each() loops through all elements with a specific class. .attr() changes attribute, in this case src.

References:

https://api.jquery.com/each/

http://api.jquery.com/attr/

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">

回答4:

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

来源：https://stackoverflow.com/questions/31154225/change-image-source-using-javascript-onclick-with-effect

标签

javascript

jquery

html

css

image